refactor(components): 统一组件API规范并完善表单重置功能
- 将多个组件的props从具体属性名改为统一的value属性 - 为所有组件添加v-model支持,替换原有的具体属性绑定 - 统一实现resetField方法,确保表单重置功能一致性 - 修正组件内部数据绑定逻辑,使用innerValue替代直接修改prop - 更新文档示例,将API参数说明改为value | v-model格式 - 为代码编辑器、富文本编辑器等组件添加input事件发射 - 调整文件上传组件的值类型定义,从Object改为String - 移除废弃的maxLength回调方法,优化编辑器性能 - 重构双向绑定逻辑,确保父子组件数据同步正确性 - 为树形选择器添加ref引用以便操作内部实例 - 调整组件演示页面的导入路径和标签页名称结构
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>实时与服务器进行数据交互</li>
|
||||
<li>服务器主动推送数据给客户端</li>
|
||||
<li>在使用过程中有任何问题,咨询 @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="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<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