第一次用这玩意，花了2天研究了下Vue，看了下Element UI的控件，觉得简直是颠覆三观，尼玛这个项目大把时间都花在前端了。。。。
花了大半天封装了一个Select，好多坑。
先上代码
组件：
-
<template>
-
<div>
-
<!--$attrs参数透传 原本控件的参数 如果是自己新加的就必须单独写,不然读取不到 -->
-
<el-select v-bind=
"$attrs"
-
v-model=
"value"
-
v-bind:api=
"api"
-
v-on:change=
"change"
-
:optionList=
"optionList">
-
<el-option v-
for=
"item in GetoptionList"
-
:key=
"item.value || item.ID"
-
:label=
"item.label || item.Name"
-
:value=
"item.value || item.ID"
-
:disabled=
"item.disabled">
-
</el-option>
-
</el-select>
-
</div>
-
</template>
-
-
-
<script>
-
import axios from
'axios'
-
export
default {
-
name:
"h3select",
-
data() {
-
return {
-
//value: null,
-
optionList:
null,
-
api:
null
-
}
-
},
-
// 使用计算属性用于回显问题
-
computed: {
-
//value: function () {
-
// return this.$attrs.value || ''
-
//},
-
value: {
-
get() {
-
return
this.$attrs.value ||
null
-
},
-
set: function (selectval) {
-
//console.log(selectval);
-
this.$attrs.value = selectval ||
null;
-
}
-
},
-
// 是否禁用
-
disabled() {
-
return
this.$attrs.disabled ||
false
-
},
-
// 下拉选列表
-
GetoptionList() {
-
if (
this.$attrs.api !=
null) {
-
return
this.optionList;
//获取当前组件上的属性
-
}
-
else {
-
return
this.$attrs.optionList;
//获取本实例上传进来的属性
-
}
-
},
-
// 输入框尺寸
-
size() {
-
return
this.$attrs.size
-
},
-
// 提示信息
-
placeholder() {
-
return
this.$attrs.placeholder ||
'请选择'
-
},
-
// 是否可搜索
-
filterable() {
-
return
this.$attrs.filterable ===
false ?
this.$attrs.filterable :
true
-
},
-
//是否可以清空选项
-
clearable() {
-
return
this.$attrs.clearable ||
false
-
}
-
},
-
methods: {
-
change(
val) {
-
触发当前实例上的事件
-
this.$emit(
'change',
val);
-
},
-
getCompany() {
-
if (
this.$attrs.api !=
null) {
-
axios.
get(
this.$attrs.api, {
// 还可以直接把参数拼接在url后边
-
params: {
-
Name:
''
//参数
-
}
-
}).then(res => {
//这个地方如果要访问this.XXXX 必须用res=> {}方式
-
this.optionList = res.
data;
-
}).
catch(function (error) {
-
console.log(error);
-
});
-
}
-
}
-
},
-
created() {
-
this.getCompany();
-
}
-
}
-
</script>
写组件的时候，遇到的一些问题：
1、获取页面上的参数，如果没有加bing，组件里是获取不到的，v-bind="$attrs"，这个俊是参数透传，只要原本参数存在的，组件里面通过this.$attrs.XXX就能设置/获取它们。
2、axios方法then的时候一定要用res=>{},不要用function(res){}，他们访问的this是不一样的，这个问题坑了好久
3、控件默认值用了计算属性
4、绑定option的时候，试了下||，居然可以，提高兼容性。
vue页面
-
<h3select v-model=
"vip.option"
-
:optionList=
"vip.optionList"
-
:placeholder=
"vip.placeholder"
-
:size=
"'mini'"
-
:clearable=
"vip.clearable"
-
:filterable=
"vip.filterable"
-
:api=
"vip.api"
-
style=
"width: 200px;"
-
class=
"filter-item"
-
:label=
"'VIP'"
-
@change=
"changevip_option"></h3select>
-
data() {
-
return {
-
vip: {
-
api:
"http://......./GetCompanyList",
-
//select选项
true
false
必须要加单引号。不然控件选择false无法选中
-
optionList:
'',
//[{
label:
'是',
value:
'true' }, {
label:
'否',
value:
'false' }],
//,
disabled:
true
-
//选中项
默认值
-
option:
null,
-
//api
-
//开启清理
-
clearable:
true,
-
//底纹字
-
placeholder:
'是否VIP',
-
//筛选
-
filterable:
true,
-
}
-
}}
开始用测试对象是[{ label: '是', value: true}, { label: '否', value: false}]，结果发现当选false的时候，值改变了，但是无法选中。改成字符串才正常了。还有数据值是数字的也有坑，直接显示数字了，文本就不出来。
class style 这种的会原样输出。
引用
-
//引入自定义组件
-
import H3globalVue
from
'./components/index'
-
Vue.
use(H3globalVue);
在main.js中，全局注册，就不用每个页面都去加了。路径也是个坑，搞了好久。
要疯，简直反人类。。。
转载：https://blog.csdn.net/cmhdl521/article/details/116237123
查看评论