40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<template>
|
||
<div class="demo-drop-roles-class">
|
||
<tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
|
||
<br /><br />
|
||
<tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
|
||
<br /><br />
|
||
<tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
|
||
<br /><br />
|
||
<tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
|
||
<br /><br />
|
||
<p>当前选中值：{{ value }}</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="jsx">
|
||
import { ref, getCurrentInstance } from 'vue'
|
||
import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
|
||
|
||
const value = ref('')
|
||
const instance = getCurrentInstance()
|
||
const { $service } = instance.appContext.config.globalProperties
|
||
|
||
function change(role) {
|
||
// 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
|
||
$service?.common.getChangeRoleUrl(role).then((url) => {
|
||
TinyNotify({
|
||
title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
|
||
message: url,
|
||
offset: 0
|
||
})
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.demo-drop-roles-class {
|
||
width: 280px;
|
||
}
|
||
</style>
|