若依小程序字典使用,与后台使用操作效果一致
代码(页面使用)
<tempalte>
<view v-if="hasRole(['common'])">角色权限测试</view>//权限校验写法
<view v-if="hasPerimission(['system:user:type'])">按钮权限测试</view>
单个值用法
<dict-tag :options="dict.type.zh_meeting_equipment" :value="1" />
字典值拿出
<view v-for="dict in dict.type.sys_user_sex" :key="dict.value"> {{dict.label}}</view>
多参数值用法,本文zh_meeting_equipment是数据库中值,具体使用请参考实际
zh_meeting_equipment=[1,3,4]类型
<view>
<uni-list>
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'wallet-filled'}" title="设备">
<template v-slot:footer>
<view style="color: #999999;font-size: 12px;width: 400upx;text-align: right;">
<dict-tag :options="dict.type.zh_meeting_equipment" :value="item.availableEquipment ? item.availableEquipment.split(',') : []" />
</view>
</template>
</uni-list-item>
<uni-list>
</view>
</template>
export default {
dicts: ['zh_meeting_equipment'],
data() {
}
}
多参数实现效果
核心代码包(本文件包含z字典验证以及权限验证,直接放入若依app,配置即可使用)
链接:https://pan.baidu.com/s/1iARq5k9Djfa-X8YTFvCIXQ
提取码:asdf
main.js配置
import Vue from 'vue'
import App from './App'
import store from '@/store/store'
import DictData from '@/common/dict/init'
import DictTag from '@/common/dict/DictTag'
import { hasRole, hasPerimission } from '@/common/auth.js'
Vue.component('DictTag', DictTag)
Vue.prototype.$store = store;
Vue.prototype.hasRole = hasRole
Vue.prototype.hasPerimission = hasPerimission
Vue.config.productionTip = false
DictData.install()
App.mpType = 'app'
const app = new Vue({ ...App
})
app.$mount()