feat(utils): 为消息提示组件添加持续时间配置选项
- 为 KitMessage.js 中的 Info、Success、Warning 和 Error 方法添加 duration 参数，默认值为 3000ms - 在 KitMessage.js 中当 duration 小于等于 0 时显示关闭按钮 - 为 KitNotification.js 中的 Info、Success、Warning 和 Error 方法添加 duration 参数，默认值为 3000ms - 移除 WebSocketDemo.vue 组件文件 - 修改 CuteButton.vue 组件将默认类型从 primary 改为 normal，并重构内部类型计算逻辑 - 为 CuteLink.vue 组件添加 disabled 属性支持
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>触发提交/执行某个操作</li>
|
||||
<li>页面内主、次操作之间需要明确的视觉层级（primary/secondary/normal/text）</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<el-row>
|
||||
<cute-button>默认按钮</cute-button>
|
||||
<cute-button type="primary">主要按钮</cute-button>
|
||||
<cute-button type="secondary">次要按钮</cute-button>
|
||||
<cute-button type="normal">普通按钮</cute-button>
|
||||
<cute-button type="text">文字按钮</cute-button>
|
||||
</el-row>
|
||||
<h4>禁用状态</h4>
|
||||
<el-row>
|
||||
<cute-button disabled>默认按钮</cute-button>
|
||||
<cute-button disabled type="primary">主要按钮</cute-button>
|
||||
<cute-button disabled type="secondary">次要按钮</cute-button>
|
||||
<cute-button disabled type="normal">普通按钮</cute-button>
|
||||
<cute-button disabled type="text">文字按钮</cute-button>
|
||||
</el-row>
|
||||
<h4>Loading状态</h4>
|
||||
<el-row>
|
||||
<cute-button loading>默认按钮</cute-button>
|
||||
<cute-button loading type="primary">主要按钮</cute-button>
|
||||
<cute-button loading type="secondary">次要按钮</cute-button>
|
||||
<cute-button loading type="normal">普通按钮</cute-button>
|
||||
<cute-button loading type="text">文字按钮</cute-button>
|
||||
</el-row>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteButtonDemo',
|
||||
components: { CuteButton },
|
||||
data() {
|
||||
return {
|
||||
apiData: [
|
||||
{ name: 'type', remark: '按钮类型', type: 'primary| secondary | normal | text', defaultValue: 'normal', required: '否' },
|
||||
{ name: 'icon', remark: '内置图标占位', type: '参考ElementUI icon', defaultValue: '-', required: '否' },
|
||||
{ name: 'disabled', remark: '是否禁用', type: 'boolean', defaultValue: 'false', required: '否' },
|
||||
{ name: 'loading', remark: '载入状态（禁用点击，展示 loading）', type: 'boolean', defaultValue: 'false', required: '否' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>文字链接等</li>
|
||||
<li>需要另起页面，不在当前页面打开</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<el-row>
|
||||
<cute-link title="百度一下" href="https://www.baidu.com" />
|
||||
</el-row>
|
||||
<h4>禁用状态</h4>
|
||||
<el-row>
|
||||
<cute-link title="百度一下" href="https://www.baidu.com" disabled />
|
||||
</el-row>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteLink from '@/views/components/dev/CuteLink.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteLinkDemo',
|
||||
components: { CuteLink },
|
||||
data() {
|
||||
return {
|
||||
apiData: [
|
||||
{ name: 'title', remark: '按钮类型', type: 'primary| secondary | normal | text', defaultValue: 'normal', required: '否' },
|
||||
{ name: 'href', remark: '内置图标占位', type: '参考ElementUI icon', defaultValue: '-', required: '否' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>不离开当前场景完成增删改操作</li>
|
||||
<li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
|
||||
<li>作为配置型功能及信息的容器</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<el-row>
|
||||
<cute-button @click="handleDeleteConfirm">删除确认框</cute-button>
|
||||
<cute-button @click="handleDeleteMessageConfirm">删除确认框(自定义提示)</cute-button>
|
||||
<cute-button @click="handleShowConfirm">确认内容消息框</cute-button>
|
||||
<cute-button @click="handleTextInputConfirm">数据输入对话框</cute-button>
|
||||
</el-row>
|
||||
<h4>快捷调用</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import KitMessage from '@/utils/elementui/KitMessage'
|
||||
import KitDialog from '@/utils/elementui/KitDialog'
|
||||
|
||||
export default {
|
||||
name: 'KitDialogDemo',
|
||||
components: { CuteButton },
|
||||
data() {
|
||||
return {
|
||||
apiData: [
|
||||
{ name: 'message', remark: '自定义提示信息', type: 'string', defaultValue: '-', required: '否' },
|
||||
{ name: 'confirmCallBack', remark: '确定回调', type: '() => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'cancelCallBack', remark: '取消回调', type: '() => {}', defaultValue: '-', required: '否' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDeleteConfirm() {
|
||||
KitDialog.DeleteConfirm(() => {
|
||||
KitMessage.Success('确定回调')
|
||||
}, () => {
|
||||
KitMessage.Warning('取消回调')
|
||||
})
|
||||
},
|
||||
handleDeleteMessageConfirm() {
|
||||
KitDialog.DeleteMessageConfirm('请确认是否删除当前麦晓雯', () => {
|
||||
KitMessage.Success('确定回调')
|
||||
}, () => {
|
||||
KitMessage.Warning('取消回调')
|
||||
})
|
||||
},
|
||||
handleShowConfirm() {
|
||||
KitDialog.ShowConfirm('温馨提醒', '这里是提醒的内容')
|
||||
},
|
||||
handleTextInputConfirm() {
|
||||
KitDialog.TextInputConfirm('温馨提醒', /^[a-z]+$/, '正则校验输入值均为小写字母不通过', (value) => {
|
||||
KitMessage.Success('确定回调，输入的值：' + value)
|
||||
}, () => {
|
||||
KitMessage.Warning('取消回调')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>当需要向用户展示操作结果时，如成功、失败、警告等状态反馈</li>
|
||||
<li>系统级公告，全局类警示提示，模块类状态反馈（成功、警告、错误等）</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<el-row>
|
||||
<cute-button @click="handleInfoClick">Info 提示</cute-button>
|
||||
<cute-button @click="handleWarningClick">Warning 提示</cute-button>
|
||||
<cute-button @click="handleSuccessClick">Success 提示</cute-button>
|
||||
<cute-button @click="handleErrorClick">Error 提示</cute-button>
|
||||
</el-row>
|
||||
<h4>快捷调用</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import KitMessage from '@/utils/elementui/KitMessage'
|
||||
|
||||
export default {
|
||||
name: 'KitMessageDemo',
|
||||
components: { CuteButton },
|
||||
data() {
|
||||
return {
|
||||
apiData: [
|
||||
{ name: 'content', remark: '内容', type: 'string | VNode', defaultValue: '-', required: '否' },
|
||||
{ name: 'duration', remark: '显示时间, 毫秒。设为 0 则不会自动关闭', type: 'number', defaultValue: '3000', required: '否' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInfoClick() {
|
||||
KitMessage.Info('这是一段 Info 通知提示信息')
|
||||
},
|
||||
handleWarningClick() {
|
||||
KitMessage.Warning('这是一段 Warning 通知提示信息')
|
||||
},
|
||||
handleSuccessClick() {
|
||||
KitMessage.Success('这是一段 Success 通知提示信息')
|
||||
},
|
||||
handleErrorClick() {
|
||||
KitMessage.Error('这是一段 Error 通知提示信息')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
在系统四个角显示通知提醒信息。经常用于以下情况
|
||||
<ul class="description">
|
||||
<li>较为复杂的通知内容</li>
|
||||
<li>带有交互的通知，给出用户下一步的行动点</li>
|
||||
<li>系统主动推送</li>
|
||||
<li>当需要向用户展示重要信息但又不希望打断用户当前操作时</li>
|
||||
<li>当需要同时展示多个不同类型的通知信息时</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<el-row>
|
||||
<cute-button @click="handleInfoClick">Info 通知</cute-button>
|
||||
<cute-button @click="handleWarningClick">Warning 通知</cute-button>
|
||||
<cute-button @click="handleSuccessClick">Success 通知</cute-button>
|
||||
<cute-button @click="handleErrorClick">Error 通知</cute-button>
|
||||
</el-row>
|
||||
<h4>快捷调用</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import KitNotification from '@/utils/elementui/KitNotification'
|
||||
|
||||
export default {
|
||||
name: 'KitNotificationDemo',
|
||||
components: { CuteButton },
|
||||
data() {
|
||||
return {
|
||||
apiData: [
|
||||
{ name: 'content', remark: '内容', type: 'string | VNode', defaultValue: '-', required: '否' },
|
||||
{ name: 'duration', remark: '显示时间, 毫秒。设为 0 则不会自动关闭', type: 'number', defaultValue: '3000', required: '否' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInfoClick() {
|
||||
KitNotification.Info('这是一段 Info 通知提示信息')
|
||||
},
|
||||
handleWarningClick() {
|
||||
KitNotification.Warning('这是一段 Warning 通知提示信息')
|
||||
},
|
||||
handleSuccessClick() {
|
||||
KitNotification.Success('这是一段 Success 通知提示信息')
|
||||
},
|
||||
handleErrorClick() {
|
||||
KitNotification.Error('这是一段 Error 通知提示信息')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>实时与服务器进行数据交互</li>
|
||||
<li>服务器主动推送数据给客户端</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计） @Odboy（后端）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<el-card>
|
||||
<div>
|
||||
<cute-button type="primary" @click="onConnectClick">连接</cute-button>
|
||||
<el-input v-model="sendVal" style="width: 300px" placeholder="请输入要发送的内容" />
|
||||
<cute-button type="secondary" @click="onSendClick">发送</cute-button>
|
||||
<cute-button type="primary" @click="onCloseClick">关闭</cute-button>
|
||||
</div>
|
||||
<el-divider>返回内容</el-divider>
|
||||
<div style="width: 300px;min-height: 200px">{{ responseTxt }}</div>
|
||||
</el-card>
|
||||
<h4>快捷调用</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import KitWsClient from '@/utils/KitWsClient'
|
||||
import { mapGetters } from 'vuex'
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
export default {
|
||||
name: 'KitWsClientDemo',
|
||||
components: { CuteButton },
|
||||
data() {
|
||||
return {
|
||||
client: null,
|
||||
sendVal: '',
|
||||
responseTxt: '',
|
||||
apiData: [
|
||||
{ name: 'username', remark: '用户名称。对应数据库中的唯一字段：username', type: 'string', defaultValue: '-', required: '是' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user'
|
||||
])
|
||||
},
|
||||
destroyed() {
|
||||
if (this.client) {
|
||||
this.client.close()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConnectClick() {
|
||||
const that = this
|
||||
// console.error('userInfo', that.user)
|
||||
that.client = new KitWsClient(that.user.username)
|
||||
that.client.connect(function(event) {
|
||||
console.info('=============== KitWsClient:event', event)
|
||||
}, function(msgEvent) {
|
||||
console.info('=============== KitWsClient:msgEvent', msgEvent)
|
||||
that.responseTxt = that.responseTxt + msgEvent.data + ''
|
||||
})
|
||||
},
|
||||
onSendClick() {
|
||||
if (this.client) {
|
||||
this.client.sendData({
|
||||
msgType: 'sc',
|
||||
userIds: ['123456'],
|
||||
content: this.sendVal
|
||||
})
|
||||
this.client.sendData({
|
||||
msgType: 'gc',
|
||||
content: this.sendVal
|
||||
})
|
||||
}
|
||||
},
|
||||
onCloseClick() {
|
||||
if (this.client) {
|
||||
this.client.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user