ant design vue 当中的表格自定义结构超出隐藏的自适应 动态显示省略号
前言 我们知道,在ant design vue当中的table组件里面的列表项目,我们一般会使用columns属性定义列表项目,比如下面 123456789export const columns = [ { title:'姓名', dataIndex:'name', slots:{customRender: 'name'}, ellipsis: true, align: 'center', }, ] 其中有一个属性,叫ellipsis这个是设置超出部门是否是省略号的,这个属性很有用,但是如果使用了columns当中的插槽,就会失效,所以这个时候我们必须要手动设置下超出省略显示逗号,但是之前设置的查出省略总是出现这个问题,大概就是这样子,当缩小屏幕的时候,明明可以占据完全,但是依旧显示的是省略号 原来的样式(less书写)和html结构代码,其实后面改进主要是改进css样式,html结构没有改动 12345678910 ...
ant design vue自定义表单验证不生效和自定义校验内容有值后自动清除警告的方法
前置-先来看看下面预期效果是什么 当我们点击提交表单的时候,下面的输出结果是什么?红色*代表必填字段 很明显你可能会角色在**测试这一行当中会提示信息,**但是却不会 问题原因及解决 在使用ant - design vue的表单验证的时候,如果不填写name属性,那么最后校验的时候是不会进行校验的 123456<!--不进行校验,缺少name--><a-form-item label="测试" :rules="[{ required: true, message: '测试不能为空', whitespace: true },]"> <div style="position: relative;display: inline-block"> <a-input v-model:value="dataForm.name" :maxlength="20" style="wi ...
navigator.clipboard.readtext开发的时候有用,编译后测试却不生效
使用navigator.clipboard.readtext开发的时候有用,编译后测试却不生效 当然,navigator.clipboard.writeText复制也不会生效~ 原因 原因就是在本地的时候都是安全域名,编辑后在服务器上测试的时候可能使用的就是不安全域名了(比如http) 安全域包括本地访问与开启TLS安全认证的地址,如 https 协议的地址、127.0.0.1 或 localhost 。 解决 使用clipboard.js,官网https://clipboardjs.com/,具体怎么用看https://www.npmjs.com/package/clipboard 使用window.isSecureContext判断集合document.execCommand使用(不过document.execCommand废弃了,不推荐使用) 12345678910111213141516171819function copyValue = (value) => { value = value + ""; if(window.isSe ...
记录下ant design vue tab和pagination(分页器)使用导致分页器total和其他不正常的问题
问题 使用ant design vue 的tab组件,每一个tab组件都有一个分页器pagination对象 可以看到,我设置了默认tab项目为图片,这里的分页器按照了我要求显示 但是我一切换到其他tab,其他tab页面分页器显示就不正常 分析 可以看到ant design vue实现tab的原理就是v-if 当没有轮到我们选择的tab项的时候,就不渲染,完全隐藏了(v-if也是一样的) 所以问题就很有可能是渲染的原因 解决 定位了问题,看看官方api文档有没有不使用v-if的办法 可以看到,有一个forceRender属性在每一个tab项当中,我们试试看 添加,重新查看效果 bug成功解决
vue当中script setup语法糖
前置 发现vue3的<script setup>很好用,就学习了下 https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props https://cn.vuejs.org/api/sfc-script-setup.html https://blog.csdn.net/weixin_45203607/article/details/123130829 Vue3-script-setup的作用引入组件后可以不用手动去components当中手动在输入名称注册了,会自动注册组件 之前的(需要引入并注册) 1234567891011121314<template><UserInfo></UserInfo></template><script>import UserInfo from './components/UserInfo.vue';export default { name: ...
微信小程序抓包-夜神模拟器结合BurpSuite抓包(可用于现在最新版本微信)
警告 2023年3月23日18.37.46:很多人说网络错误,目前我再次自己试过了,都没有出现这个问题,如果害怕出现网络异常等情况,就不要看下去了 前置 之前总是通过电脑来抓包,时常失效,这里就用夜神模拟器配合Burp来抓包 也可以参考这位博主的文章 Fiddler+Proxifier进行PC端微信小程序抓包 通过Fiddler模拟器抓包微信小程序(适用APP) 夜神模拟器安卓版本 Android7.1.2 使用到工具 burp绿色免装jdk版 百度网盘:链接:https://pan.baidu.com/s/1y7KuzSg_SKmtEP4OTRycwg?pwd=52pj 提取码:52pj 夸克盘: https://pan.quark.cn/s/220e34228d8b#/list/share 参考文章 https://blog.csdn.net/qq_34498872/article/details/122469329 https://www.52pojie.cn/forum.php?mod=viewthread&tid=1617968& ...
vue当中绑定回调函数的时候添加括号和不添加括号的区别
前置 有时候我们会看到绑定回调函数的时候,就拿最普遍的超链接的@click事件来说,有时候我们会看到别人这样子写 写法一 1<a @click="handleClick">单击我</a> 写法二 1<a @click="handleClick()">单击我</a> 那么写法一盒写法二有什么区别呢?(注意是有区别的) 我们书写下代码(很简单的代码,对比输出不同而已) 12345678910111213141516171819<template> <a @click="handleClick">单击我1</a> <a @click="handleClick()">单击我2</a></template><script>export default { name: "App", setup(){ function hand ...
vue控制台警告Runtime directive used on component with non-element root node.
控制台警告提示信息 控制台警告Runtime directive used on component with non-element root node. The directives will not function as intended. 原因和解决原因 意思是自定义指令不能放到组件上,而是要放到自有的元素上,也就是这里用到的v-show不能放在自定义组件上,而是放在原来就有的标签上,所以这里套了一层div 比如之前的是这样子,v-show指令用在了自定义组件ImageAddR身上,就警告了 1<ImageAddR ref="ImageAddR" v-show="materialType === 'image'"></ImageAddR> 解决 外面套一层不是自定义组件的东东就可以,我这里套了一层div,你也可以嵌套一层template 123456789<div v-show="materialType === 'image'"> ...
vue3全局事件总线-mitt的使用(和vue2的全局总线不同)
前置 Vue3移除了$on $off等自带的自定义事件相关方法,因此在vue3中他推荐我们下载mitt库来使用事件总线传递数据 安装 1npm install mitt 在线演示地址 https://codesandbox.io/s/mittzong-xian-de-shi-yong-ro4ili?file=/src/App.vue 使用mitt充当总线 需要注意的是,每调用一个mitt(),都是一个总线,所以这里为什么要封装为一个工具库,就是只使用一个总线 下列代码的效果为单击一个组件,传递给另外一个组件值 当然,这里和vue2之前也是一样的,也是只能传递一个参数,需要传递多个参数的时候封装为一个对象,然后接受的时候结构就可以~ 1.定义一个工具库为bus.js123456789import mitt from "mitt";// export default mitt();//也可以写完整嗲const emitter = mitt();//每调用一个mitt,都是一个总线,所以这里为什么要封装为一个工具库,就是只使用一个总线export defau ...
vue3中使用混入mixins在setup当中
前置 我们知道,在vue2的时候,想使用混入,直接就使用,但是在vue3里,就不一样了,多了setup 那么我们怎么使用混入在vue3当中的setup呢? 关键就是getCurrentInstance 示例 https://codesandbox.io/s/vue3dang-zhong-setupshi-yong-hun-ru-shi-li-rfpdmz?file=/src/App.vue 使用mixins/query.js文件 1234567export default { methods: { sayHello() { alert("你好,我说hello"); } }}; App.vue(这里简单演示就直接在App.vue使用混入了) 123456789101112131415161718<script>import HelloWorldVue from "./components/HelloWorld.vue";import ...