wenyi 发布的文章

Vue.js 当遇到单选按钮 选不中情况


问题的出现:
当单选的模板也是数据配置时,出现数字的key 不能 正常渲染

如:
options 是这样的数据时,就想做三个选项,但这三个选项也是数据配置项,key为数字时不能正常渲染
options:{1:'二手市场', 2:'新闻页',3:'趣味中心'}

<el-radio
        v-for="(item,i) in options"
        v-model="formData[fd.prop]"
        :label="i"
        :key="i"
        :disabled="readonly">
    {{item}}
</el-radio>

出现情况分析
应该是数据类型不匹配
formData[*]打印出数据类型是number
那应该就是options在后续的处理中,已经把数据类型变了

解决办法
当判断 formData[*]为number时,强制性把 options 的key转化为number

<el-radio
        v-for="(item,i) in options"
        v-model="formData[fd.prop]"
        :label="(typeof formData[*] == 'number')?Number(i):i"
        :key="i"
        :disabled="readonly">
    {{item}}
</el-radio>

uniapp flex 自适应高度 区域里面内容滚动


如下代码,想在页面box中,content固定高度,box-c区域填满其他区域,scroll-view 区域内滚动

<view class="box">
  <view class="content">
   hello
  </view>
  <swiper class="box-c">
   <swiper-item class="child">
    <scroll-view :scroll-y="true">
       足够高的滚动区域
    </scroll-view>
   </swiper-item>
  </swiper>
 </view>

样式如下

 .box{
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background-color: #ffffff;
  height: 100vh;
 }
 .content{
  height: 70upx;
  background: #CCCCCC;
 }
 .box-c,.child{
  display: flex;
  flex: 1;
 }

总结:swiper 和 swiper-item 都要做填满操作,否则不成功


uniapp中引入 iconfont


先到 https://www.iconfont.cn/ 添加项目,加入想要的图标

下载图标

在项目下添加common公共文件

把解压的iconfont.css 文件放在common目录下

在common目录下创建font文件,把加压的除了iconfont.css 文件放进去(不要放文件夹)

在APP.vue 中引入iconfont.css(这样就不用在页面中单独引入了)

<style>
  import "~@/common/iconfont.css";
</style>

期间注意iconfont.css 文件,在路径前面都加上 ~@/common/font/ 处理后效果如下

@font-face {font-family: "iconfont";
  src: url('~@/common/font/iconfont.eot?t=1595143705861'); /* IE9 */
  src: url('~@/common/font/iconfont.eot?t=1595143705861#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,base64编码文件') format('woff2'),
  url('~@/common/font/iconfont.woff?t=1595143705861') format('woff'),
  url('~@/common/font/iconfont.ttf?t=1595143705861') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/common/font/iconfont.svg?t=1595143705861#iconfont') format('svg'); /* iOS 4.1- */
}