1.目的
经过前面四节在总结，已经构建了一个非常简陋的移动端小项目。在这次的项目中发现了一个组件或者场景可能会在今后的项目中使用。所以想把这个组件提取出来，一是总结，二是备份，为以后的项目做下基础和准备。
2.描述
图片.png
如图所示，目的就是提取这部分功能，其实就是一个axios请求的数据按照自己设定的样式，模拟原声select功能，点击弹窗模拟select-option功能。
那么~这个思路 就相当于是对mint-ui的二次封装吧。
3.目标
实现一个可复用的select样式的下拉框，更好的点的可以支持二级联动
上代码
<template>
<div class="perparContent">
<span
class="singlePerparInfo"
v-on:click="modelIdClick"
>{{modelName}}<a class="down-arrow"></a></span>
<span
v-show="parentData.subShow"
class="singlePerparInfo"
v-on:click="brandIdClick"
>{{brandName}}<a class="down-arrow"></a></span>
<mt-popup
v-model="popupVisible"
position="bottom"
class="mint-popup-4"
>
<div class="page-picker-wrapper">
<mt-picker
:slots="modelsKey"
value-key="name"
@change="onValuesChangeOfModel"
:visible-item-count="5"
ref="picker"
></mt-picker>
</div>
</mt-popup>
<mt-popup
v-model="brandPopupVisible"
position="bottom"
class="mint-popup-4"
>
<div class="page-picker-wrapper">
<mt-picker
:slots="brandsKey"
value-key="name"
@change="onValuesChangeOfBrand"
:visible-item-count="5"
ref="picker"
></mt-picker>
</div>
</mt-popup>
</div>
</template>
简单的说就是两个mint-ui组件，分别是两个popup和picker，通过父组件的传值控制第二个popup的显示与隐藏。js部分：
import { Popup } from "mint-ui";
import { Toast } from "mint-ui";
export default {
name: "mintSelect",
props: {
parentData: {}
},
data() {
return {
subShow: false,
popupVisible: false,
brandPopupVisible: false,
modelName: "全部",
brandName: "全部",
brandId: "",
modelId: "",
modelsKey: [
//车系
{
flex: 1,
values: [
{
index: 0,
code: "",
name: "全部"
}
],
textAlign: "center",
className: "slot1",
defaultIndex: 0
}
],
brandsKey: [
//品牌
{
flex: 1,
values: [
{
index: 0,
code: "",
name: "全部"
}
],
textAlign: "center",
className: "slot1",
defaultIndex: 0
}
]
};
},
mounted: function() {
//初始化车型库
this.getModelKey();
},
methods: {
//点击车型
modelIdClick() {
this.popupVisible = true;
},
//点击品牌
brandIdClick() {
this.brandPopupVisible = true;
},
onValuesChangeOfBrand(picker, values) {
this.brandName = values[0].name;
var data = {
name: "brand",
code: values[0].code
};
this.brandId = values[0].code;
//子组件向父组件传递参数
///this.$emit("func", data);
},
onValuesChangeOfModel(picker, values) {
this.modelName = values[0].name;
var data = {
name: "model",
code: values[0].code
};
this.modelId = values[0].code;
//切换model
var code = values[0].code;
//子组件向父组件传递参数
//this.$emit("func", data);
var url = this.HOME + this.parentData.subPostUrl + code; //HOME变量为已挂载的可跨域域名，这里将其拼接完，成为一个完整路径
this.$axios({
//this代表vue对象，之前在入口文件中把axios挂载到了vue中，所以这里直接用this.$axios调用axios对象
method: "get",
url: url,
data: {}
})
.then(res => {
var arr = res.data.data;
var values = [];
//模型对象中转
for (const item in arr) {
var single = {
index: parseInt(item),
code: arr[item].id,
name: arr[item].name
};
values.push(single);
this.brandsKey[0].values.push(single);
}
//this.$refs.picker.setSlotValues(0, values);
console.log(this.modelsKey);
//this.modelsKey = res.data.modelkey;
})
.catch(err => {
//console.log(err);
Toast(err.data.result.resultDesc);
});
},
getModelKey() {
var url = this.HOME + this.parentData.postUrl; //HOME变量为已挂载的可跨域域名，这里将其拼接完，成为一个完整路径
var param = this.parentData.param || {};
this.$axios({
//this代表vue对象，之前在入口文件中把axios挂载到了vue中，所以这里直接用this.$axios调用axios对象
method: "post",
url: url,
data: param
})
.then(res => {
var arr = res.data.data.modelkey;
var values = [];
//模型对象中转
for (const item in arr) {
var single = {
index: parseInt(item),
code: arr[item].id,
name: arr[item].name
};
values.push(single);
this.modelsKey[0].values.push(single);
}
//this.$refs.picker.setSlotValues(0, values);
console.log(this.modelsKey);
//this.modelsKey = res.data.modelkey;
})
.catch(err => {
//console.log(err);
Toast(err.data.result.resultDesc);
});
}
}
};
就是请求后台数据，监听popup值的变化。
上传npm的注意事项
必须有一个入口文件
{
"name": "vue-mint-select",
"version": "1.0.5",
"description": "修正插件的入口文件",
"author": "aladdingod <hanke19891229@163.com>",
"main": "index.js",
"private": false,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js ",
"lib": "vue-cli-service build --target lib --name vue-mint-select --dest lib src/cusPlugins/index.js"
},
外侧创建的index.js
就是自己定义的组件的入口
module.exports = require('./src/cusPlugins/index.js')
index.js
const requireComponent = require.context('./', true, /\.vue$/)
const install = Vue => {
if (install.installed) return
install.installed
requireComponent.keys().map(component => {
const config = requireComponent(component)
const componentName = config.default.name
Vue.component(componentName, config.default || config)
})
}
export default {
install
}
引入所有的自定义组件内容，就是遍历目标目录下的vue文件
发布 npm publish
插件的使用
安装
npm install mint-select
引入依赖
import Vue from 'vue'
import App from './App'
import Mint from 'mint-ui'
Vue.use(Mint)
import 'mint-ui/lib/style.css'
import pickerAndSheets from 'mint-select'
Vue.use(pickerAndSheets)
import axios from 'axios'
Vue.prototype.$axios = axios
插件的使用
<mintSelect v-bind:parentData="parentData"
@func="getModelOrBrand">
</mintSelect>
插件之前的传值
export default {
name: "App",
components: {},
data() {
return {
parentData: {
postUrl: "/wx/condition", //第一个select获取数据请求的地址
subPostUrl: "/wx/getBrandByModel?modelid=", //第二个select获取数据请求的地址
subShow: true, //是否显示第二个select
param: {
test: "123" //第一个 请求所携带的参数，也可以不传默认为{}
}
}
};
},
methods: {
//emit子父组件传值
//子组件传递给父组件的值，就是选择的select的内容
getModelOrBrand(data) {
this.param.brandId = data.brand;
this.param.modelId = data.model;
}
}
};
