博客园 - 西贝小小凤
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=167764
2024-01-10T09:03:27Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
feed.cnblogs.com
https://www.cnblogs.com/xbxxf/p/17956724
css 图片高度固定,宽度自适应,窗口缩小,图片两边隐藏,始终保持图片的内容居中 - 西贝小小凤
嗯,不知道这个标题说清楚了吗哈哈哈哈一般自适应,是等比例缩小的,但是我们这个不太一样,要求高度固定,但是图片不变形, 比如我们的结构是这样的 <div class="test"> <img src="./image/list_banner.png" alt=""> </div> 样式这么些,用到这个
2024-01-10T08:09:00Z
2024-01-10T08:09:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】嗯,不知道这个标题说清楚了吗哈哈哈哈一般自适应,是等比例缩小的,但是我们这个不太一样,要求高度固定,但是图片不变形, 比如我们的结构是这样的 <div class="test"> <img src="./image/list_banner.png" alt=""> </div> 样式这么些,用到这个 <a href="https://www.cnblogs.com/xbxxf/p/17956724" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/17599447.html
css 中强制不换行后,伪类元素变形,用到的flex-shrink 属性 - 西贝小小凤
之前都没用过这个属性,最近做项目遇到一个不同屏幕下可能会换行的问题,设置了强制 不换行,但是伪类元素就没挤没了,请教了同事,用到了flex-shrink属性 然后我就去看了看这个属性的用法,简单记录一下 flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于
2023-08-01T15:31:00Z
2023-08-01T15:31:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】之前都没用过这个属性,最近做项目遇到一个不同屏幕下可能会换行的问题,设置了强制 不换行,但是伪类元素就没挤没了,请教了同事,用到了flex-shrink属性 然后我就去看了看这个属性的用法,简单记录一下 flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于 <a href="https://www.cnblogs.com/xbxxf/p/17599447.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/17596419.html
vue项目中禁止移动端双击放大 - 西贝小小凤
最近有时间做自己的事了,才想起来记录这些事 其实可简单了一句话的事 找到index.html 的这个代码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 把他替换成这个,就好了 <meta name="vi
2023-08-01T06:33:00Z
2023-08-01T06:33:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】最近有时间做自己的事了,才想起来记录这些事 其实可简单了一句话的事 找到index.html 的这个代码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 把他替换成这个,就好了 <meta name="vi <a href="https://www.cnblogs.com/xbxxf/p/17596419.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/17571892.html
vue3创建项目,vite+js - 西贝小小凤
之前的时候大哥就让我自己搭架子,但是我拖延症,现在用到了,得自己搭了 我的项目都放到了 VuePorjects这个目录里面, 一、先进入到指定工作目录,(不是你要创建的项目的名称哈) cd VuePorjects/ 二、创建vue3项目,安装创建项目 npm create vite @latest
2023-07-24T08:46:00Z
2023-07-24T08:46:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】之前的时候大哥就让我自己搭架子,但是我拖延症,现在用到了,得自己搭了 我的项目都放到了 VuePorjects这个目录里面, 一、先进入到指定工作目录,(不是你要创建的项目的名称哈) cd VuePorjects/ 二、创建vue3项目,安装创建项目 npm create vite @latest <a href="https://www.cnblogs.com/xbxxf/p/17571892.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/17562708.html
vue 小写转大写方法 - 西贝小小凤
好久好久没更新了啊,其实有好多可以写的, 但是不知道为啥不想写了 方法一: // 输入的金额进行大写转换 function transformation(val) { var fraction = ["角", "分"]; var digit = ["零", "壹", "贰", "叁", "肆", "
2023-07-18T05:42:00Z
2023-07-18T05:42:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】好久好久没更新了啊,其实有好多可以写的, 但是不知道为啥不想写了 方法一: // 输入的金额进行大写转换 function transformation(val) { var fraction = ["角", "分"]; var digit = ["零", "壹", "贰", "叁", "肆", " <a href="https://www.cnblogs.com/xbxxf/p/17562708.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/17243910.html
Vue3 点击复制功能,利用vue-clipboard3 - 西贝小小凤
首先安装插件 vue-clipboard3 npm install vue-clipboard3 --save 然后在页面里面引入 <button class="btn" @click="copy()">点击复制</button> 建议用buttn标签,因为别的标签可能会失效 <script set
2023-03-22T06:42:00Z
2023-03-22T06:42:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】首先安装插件 vue-clipboard3 npm install vue-clipboard3 --save 然后在页面里面引入 <button class="btn" @click="copy()">点击复制</button> 建议用buttn标签,因为别的标签可能会失效 <script set <a href="https://www.cnblogs.com/xbxxf/p/17243910.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/17118609.html
elementPlus 分页实现首页,尾页的功能 - 西贝小小凤
跪求出一个这个方法吧,自己写真麻烦,但是也是闲着没事,写一个吧 <div class="pagefun"> <!--首页按钮 disabled是鼠标禁止状态 pagenotallowd 鼠标禁用 一个红色的圈加一个斜杠 --> <button :class="['firstpage',firstPa
2023-02-14T01:34:00Z
2023-02-14T01:34:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】跪求出一个这个方法吧,自己写真麻烦,但是也是闲着没事,写一个吧 <div class="pagefun"> <!--首页按钮 disabled是鼠标禁止状态 pagenotallowd 鼠标禁用 一个红色的圈加一个斜杠 --> <button :class="['firstpage',firstPa <a href="https://www.cnblogs.com/xbxxf/p/17118609.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/17010012.html
Vue3+vant+ts 上滑加载,解决上滑调用多次数据的问题 - 西贝小小凤
之前用vue2的时候,写过vue2的用法,链接在这里点击跳转哈,用得挺好的,也没啥问题,照葫芦画瓢的做出来了,但是有问题,下滑之后调用多次数据,按理说 组件通过 loading 和 finished 这俩变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将 loading 设置成 tru
2022-12-28T06:15:00Z
2022-12-28T06:15:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】之前用vue2的时候,写过vue2的用法,链接在这里点击跳转哈,用得挺好的,也没啥问题,照葫芦画瓢的做出来了,但是有问题,下滑之后调用多次数据,按理说 组件通过 loading 和 finished 这俩变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将 loading 设置成 tru <a href="https://www.cnblogs.com/xbxxf/p/17010012.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16802849.html
Vue3 + elementplus 表单验证+上传图片+ 防止表单重复提交 - 西贝小小凤
首先,上官网地址 https://element.eleme.cn/#/zh-CN/component/form 首先页面上面用了弹窗的形式,做完之后长这样,有全屏,关闭等按钮,上效果图和完整代码!!!!! <!--点击新增按钮 --> <div class="addbtn" @click="fun
2022-10-18T08:04:00Z
2022-10-18T08:04:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】首先,上官网地址 https://element.eleme.cn/#/zh-CN/component/form 首先页面上面用了弹窗的形式,做完之后长这样,有全屏,关闭等按钮,上效果图和完整代码!!!!! <!--点击新增按钮 --> <div class="addbtn" @click="fun <a href="https://www.cnblogs.com/xbxxf/p/16802849.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16792397.html
elementUI dialog弹窗 :destroy-on-close="true" 失效 - 西贝小小凤
ele官网给的描述是这样的 但是呢,我加了个富文本编辑器,所以关闭的时候没有清除富文本编辑器的内容,我就加了个 @close="closeDialog" <el-dialog v-model="datadialog" :show-close="true" :close-on-click-modal=
2022-10-14T09:33:00Z
2022-10-14T09:33:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】ele官网给的描述是这样的 但是呢,我加了个富文本编辑器,所以关闭的时候没有清除富文本编辑器的内容,我就加了个 @close="closeDialog" <el-dialog v-model="datadialog" :show-close="true" :close-on-click-modal= <a href="https://www.cnblogs.com/xbxxf/p/16792397.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16791084.html
Vue3 +elementUI + wangEditor 富文本编辑器 - 西贝小小凤
哎呀,一个富文本编辑器折腾了我好久啊,刚开始找的就是wangEditor ,但是上传图片的调接口,我就寻思找个简单的,后来换了quill 可以不调接口上传图片,但是v-model绑定不了,而且一直报错,后来换了tinymce,按照网上的教程装完了,wuhu,直接不显示,后来我妥协了,我换回来了wan
2022-10-14T09:28:00Z
2022-10-14T09:28:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】哎呀,一个富文本编辑器折腾了我好久啊,刚开始找的就是wangEditor ,但是上传图片的调接口,我就寻思找个简单的,后来换了quill 可以不调接口上传图片,但是v-model绑定不了,而且一直报错,后来换了tinymce,按照网上的教程装完了,wuhu,直接不显示,后来我妥协了,我换回来了wan <a href="https://www.cnblogs.com/xbxxf/p/16791084.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16659097.html
vue ios系统,input输入框放大 - 西贝小小凤
最普遍的方法就是在index.html里面加这句话 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name='viewport' content='width=device-width, initial-scale=1.
2022-09-05T10:04:00Z
2022-09-05T10:04:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】最普遍的方法就是在index.html里面加这句话 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name='viewport' content='width=device-width, initial-scale=1. <a href="https://www.cnblogs.com/xbxxf/p/16659097.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16658668.html
IOS系统vue2, 点击返回上一页,页面空白无报错 - 西贝小小凤
最近移了个项目,把页面所有的东西都移过来了,但是出现了这个问题,就是ios系统,咨询列表正常,详情页也没问题,返回上一页之后页面空白,接口请求了,也没报错,用的是go history(-1)的返回方式,这。。。。。。。 而且安卓没问题,那初步判断应该是ios系统的问题了,找了点问题发现是这样的, 首
2022-09-05T08:33:00Z
2022-09-05T08:33:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】最近移了个项目,把页面所有的东西都移过来了,但是出现了这个问题,就是ios系统,咨询列表正常,详情页也没问题,返回上一页之后页面空白,接口请求了,也没报错,用的是go history(-1)的返回方式,这。。。。。。。 而且安卓没问题,那初步判断应该是ios系统的问题了,找了点问题发现是这样的, 首 <a href="https://www.cnblogs.com/xbxxf/p/16658668.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16644191.html
@vue/cli 安装及'vue' 不是内部或外部命令解决办法 - 西贝小小凤
1、首先安装@vue/cli npm install -g @vue/cli 提示安装成功,版本啥的,忘了截图 2、然后vue -V或者vue --version 查看版本 但是提示'vue' 不是内部或外部命令解决办法 我以为得重启电脑,wuhu~,不管用,正常不用重启的啊,就可以查看版本了 执行
2022-08-31T10:38:00Z
2022-08-31T10:38:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】1、首先安装@vue/cli npm install -g @vue/cli 提示安装成功,版本啥的,忘了截图 2、然后vue -V或者vue --version 查看版本 但是提示'vue' 不是内部或外部命令解决办法 我以为得重启电脑,wuhu~,不管用,正常不用重启的啊,就可以查看版本了 执行 <a href="https://www.cnblogs.com/xbxxf/p/16644191.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16476476.html
Vue url解码编码 - 西贝小小凤
1、转码encodeURIComponent(url)url:要转码的中文文字或者特殊字符返回值就是转码之后的字符,页面跳转的时候可能会使用 2、解码 decodeURIComponent(url)url:要解码的url返回值就是转码之后的字符,页面获取参数的时候会使用
2022-07-14T01:43:00Z
2022-07-14T01:43:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】1、转码encodeURIComponent(url)url:要转码的中文文字或者特殊字符返回值就是转码之后的字符,页面跳转的时候可能会使用 2、解码 decodeURIComponent(url)url:要解码的url返回值就是转码之后的字符,页面获取参数的时候会使用 <a href="https://www.cnblogs.com/xbxxf/p/16476476.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16443756.html
Vue3 van-dialog 使用 - 西贝小小凤
2用的时候特别简单,在全局里面引用一下,然后方法里面,页面里面直接使用就行了,但是到3就状况百出,v-model绑定有问题,一点不起作用 首先2用的时候,在main.js里面全局引用一下 然后页面里面直接使用 <van-dialog v-model="show" title="提醒" show-ca
2022-07-04T09:33:00Z
2022-07-04T09:33:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】2用的时候特别简单,在全局里面引用一下,然后方法里面,页面里面直接使用就行了,但是到3就状况百出,v-model绑定有问题,一点不起作用 首先2用的时候,在main.js里面全局引用一下 然后页面里面直接使用 <van-dialog v-model="show" title="提醒" show-ca <a href="https://www.cnblogs.com/xbxxf/p/16443756.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16400877.html
Vue3+ element UI 解决日期时间格式话问题 - 西贝小小凤
我们最近的项目用的都是vue3,2还没学好呢,3就开始了,做一个笨鸟,没提前飞,还拉后腿了。。。。 一日期格式 基本代码: <el-date-picker v-model="value1" type="date" placeholder="选择日期" > </el-date-picker> 不加 f
2022-06-22T07:41:00Z
2022-06-22T07:41:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】我们最近的项目用的都是vue3,2还没学好呢,3就开始了,做一个笨鸟,没提前飞,还拉后腿了。。。。 一日期格式 基本代码: <el-date-picker v-model="value1" type="date" placeholder="选择日期" > </el-date-picker> 不加 f <a href="https://www.cnblogs.com/xbxxf/p/16400877.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/16199273.html
elementUI分页修改背景颜色和滑过颜色 - 西贝小小凤
官网给的颜色长这样 但是我们要按设计图要,长这样 接下来就是我们发挥的时候了 首先改他们框架的颜色,style里面不能加scoped ,最好前面加上外面盒子的class名字,要不容易影响其他页面的效果 <style lang="scss"> //修改鼠标滑过的颜色 .el-pagination.is
2022-04-27T07:46:00Z
2022-04-27T07:46:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】官网给的颜色长这样 但是我们要按设计图要,长这样 接下来就是我们发挥的时候了 首先改他们框架的颜色,style里面不能加scoped ,最好前面加上外面盒子的class名字,要不容易影响其他页面的效果 <style lang="scss"> //修改鼠标滑过的颜色 .el-pagination.is <a href="https://www.cnblogs.com/xbxxf/p/16199273.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/15571933.html
Vue 富文本编辑器-----tinymce - 西贝小小凤
首先使用方法 下载链接 下载tinymce文件 解压后放在components目录下 页面中使用 1)引入文件 2)注册组件 3)html中使用 import Tinymce from '@/components/Tinymce' components: { Tinymce, // 富文本编辑器 }
2021-11-18T05:45:00Z
2021-11-18T05:45:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】首先使用方法 下载链接 下载tinymce文件 解压后放在components目录下 页面中使用 1)引入文件 2)注册组件 3)html中使用 import Tinymce from '@/components/Tinymce' components: { Tinymce, // 富文本编辑器 } <a href="https://www.cnblogs.com/xbxxf/p/15571933.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/xbxxf/p/15556056.html
Vue跳转到本页面跳转,解决只是传参不同,页面不刷新的问题 - 西贝小小凤
最近新来了一批小朋友,做我之前做过的项目,老大让我带带他,我还是个需要人带的菜鸟啊!!! 首先是这个么需求,文章详情右侧菜单有推荐文章,点进去还是文章详情,一想很简单是不是,后台配的是全链接,http://xxxx.com?id=1这样的,寻思直接跳转不就行了 window.location.hre
2021-11-15T06:04:00Z
2021-11-15T06:04:00Z
西贝小小凤
https://www.cnblogs.com/xbxxf/
【摘要】最近新来了一批小朋友,做我之前做过的项目,老大让我带带他,我还是个需要人带的菜鸟啊!!! 首先是这个么需求,文章详情右侧菜单有推荐文章,点进去还是文章详情,一想很简单是不是,后台配的是全链接,http://xxxx.com?id=1这样的,寻思直接跳转不就行了 window.location.hre <a href="https://www.cnblogs.com/xbxxf/p/15556056.html" target="_blank">阅读全文</a>