导航：首页 > 开发技术 >

vue映射的方法与怎么混入使用

发表于：2024-11-27 作者：千家信息网编辑

千家信息网最后更新 2024年11月27日，这篇文章主要介绍了vue映射的方法与怎么混入使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue映射的方法与怎么混入使用文章都会有所收获，下面我们一起来看看吧。vue

千家信息网最后更新 2024年11月27日vue映射的方法与怎么混入使用

这篇文章主要介绍了vue映射的方法与怎么混入使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue映射的方法与怎么混入使用文章都会有所收获，下面我们一起来看看吧。

vue映射方法与混入使用

v-select中的内容封装

场景：当在不同的组件中共同使用一些select的"内容"就可以将这些内容封装在一个文件里

1.cig2.0/src/contants.js

export const data = {  whether: [    //是/否    { value: 1, label: "是" },    { value: 0, label: "否" }  ],  hour: [    { value: "0", label: "0" },    { value: "1", label: "1" },    { value: "2", label: "2" },    { value: "3", label: "3" },    { value: "4", label: "4" },    { value: "5", label: "5" },    { value: "6", label: "6" },    { value: "7", label: "7" },    { value: "8", label: "8" },    { value: "9", label: "9" },    { value: "10", label: "10" },    { value: "11", label: "11" },    { value: "12", label: "12" },    { value: "13", label: "13" },    { value: "14", label: "14" },    { value: "15", label: "15" },    { value: "16", label: "16" },    { value: "17", label: "17" },    { value: "18", label: "18" },    { value: "19", label: "19" },    { value: "20", label: "20" },    { value: "21", label: "21" },    { value: "22", label: "22" },    { value: "23", label: "23" }  ],  //分钟  minute: [    { value: "0", label: "0" },    { value: "30", label: "30" }  ],};export function getValues(key) {  //debugger  return JSON.parse(JSON.stringify(data[key] || []));}

2.在需要使用select的组件里引入【混入】

在混入文件里返回封装的select的内容应用到组件中使用select的地方

引入混入：

import MixSearch from "@/mixins/mix-search.js";let mixSearch = MixSearch(); //因为在mix-search.js文件里 export default 是一个function()mixins: [mixSearch]

import {getValues} from "@/contants.js"let cache = {}function saveCache(key, value) {    if (!key) return;    if (value) {        cache[key] = JSON.stringify(value)    } else {        if (!cache[key]) return        return JSON.parse(cache[key])    }}export default function (ext) {    ext = ext || {}    let mixin = {        data() {            return {                fullscreenLoading: false,                pageBean: {                    pageSize: 10,                    page: 1,                    showTotal: true                },                searchModel: JSON.parse(JSON.stringify(ext))            }        },        methods: {            async payload(fn, fail) {                try {                    this.fullscreenLoading = true;                    await fn()                } catch (e) {                    console.error(e)                }                this.fullscreenLoading = false;            },            getKeyValues(key, opt) {                return getValues(key, opt)            },            // 映射字段            getSelectLabel(type, id) {                for (let i = 0; i < type.length; i++) {                    if (type[i].value == id) {                        return type[i].label                    }                }            }        },        created() {            let {pageBean, searchModel} = saveCache(this.$options.name) || {}            if (pageBean) {                this.pageBean = pageBean;                this.searchModel = searchModel;            }        },        beforeDestroy() {            saveCache(this.$options.name, {pageBean: this.pageBean, searchModel: this.searchModel})        }    }    return mixin}

                                                                                                                                    时                                                                                                            分