使用vue iview遇到的一些问题

使用阿里巴巴图标库

下载代码

这五个文件

iconfount.css

如果导入多个文件记得把@font-face复制到里面

改成./路径

//main.js
import './assets/font/iconfont.css'

可以直接使用了

<Icon custom="icon iconfont
icon_dingtalk_line
icon-icon_dingtalk_line" size="small" />
注意 记得上上 icon iconfont
后面的复制的时候要注意有没有.
因为这样我找了很久没发现是这个原因
修改class就行了
<Icon class="iconfont icon-search-1-copy" slot="suffix" />

记得如果失效  注意是否带上  icon 和 iconfout

栅格布局

None (自动) 750px 970px 1170px
xs sm md lg

虽然参照Boostrap响应式但是是24栅格

Layout 布局下面的案例没懂?? 先看后面

使用Switch 出现命名冲突,报错

Vue.component('i-switch', Switch)
不用Switch  使用i-switch标签

根据当前路由自动选中对应的菜单

    <Menu :active-name="activeName">
      <MenuItem name="/home" to="/home">Home</MenuItem>
      <MenuItem name="/about" to="/about">About</MenuItem>
    </Menu>
      <router-view></router-view>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    data(){
      return{
        activeName:this.$route.path
      }
    },
    watch:{
      '$route'(){
        this.activeName=this.$route.path
      }
    },
Switch: i-switch
Circle: i-circle   使用这两个要用后面的不然报错

Col要是里面没有写内容,需要写个div占位

深度选择器

.a >>> .b      //css
/deep/ .a{}    //scss
不要再computed  中使用ajax 请求
$watch  deep:true  深度监控
watch 第一次绑定时是不会执行的, 加上这个 immediate: true 就可以了
this.$parent.fight('xxx')// 子组件触发
fught(res){
    res
}
通过props 从父组件传入的数据
//可以通过  computed 进行操作
props: ['oldData'], // 非对象或数组类型
computed: {
  newData () {
    return this.oldData.trim().toLowerCase()
  }
}

Card

dis-hover 禁用鼠标悬停 ,默认是false,默认是有阴影的,如果不要就加上

shadow 卡片阴影,默认是不加的

webpack 不支持多行溢出隐藏

子元素继承父元素透明度问题

父元素使用rgba 就可以啦

iView常用组件清空技巧

https://blog.csdn.net/lihefei_coder/article/details/88187343

命名路由的跳转方式

<Button :to="{name:'homeB'}">homeB</Button>
记住在定义路由的时候要带name,通过name跳转

原文地址:https://www.cnblogs.com/fangdongdemao/p/10705125.html

时间: 2024-10-08 00:17:52

使用vue iview遇到的一些问题的相关文章

Vue iview中的render小案例3

当我按下play.穿梭在大街小巷没什么不对.每个人都会.只是你在束缚自己.快来做个一等一的player.要求自己不能够太普通.一定必须要去做点成就 Vue iview中的render小案例 第一个数据比较好拿是对象直接.就可以,第二个是数组所以需要遍历会麻烦些 工序一道也少不了,就像下面迟早会补齐的 每天记录一点点 { title: "场馆地址", // key: "gymnasium.name" render: (h, params) => { return

webpack+vue+iview使用vue-cli脚手架搭建

1.安装nodejs环境 下载node.js.安装成功后再控制台输入 node -v 出现版本号则,安装成功. 如果没有出现 版本号 而是出现node 不是内部命令的话 需要配置一下环境变量,如果已经出现版本号,此步骤可以忽略.将安装node的路径剪切,右键我的电脑-->属性-->高级系统环境设置-->环境变量-->找到path环境变量.加上复制的node的安装路径. 2.可以在控制台在输入一下命令,查看是否已经成功的安装了npm   npm -v  如果出现版本号说明已经安装成功

VUE iview date-picker取时间范围...

x HTML <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/iview/dist/iview.min.js"></script> <div id="app"> <row> <i-col span="12"> <date-picker

使用VUE+iView+.Net Core上传图片

我们直接进入主题,使用VS2017开发工具 首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹 名字可以随意起  我这里呢就叫做Upload了 ok ! 然后我们再创建一个控制器 IndexController 代码如下 要知道上传图片都是通过HTTP去请求,服务端从request中读取 public class PicData { public string Msg { get; set; } } [HttpPost] public async Task<boo

vue+Iview+gulp 生成文档说明

1.安装npm gulp相关插件 比如:gulp.gulp-concat.gulp-htmlmin.gulp-cssmin.gulp-cheerio.gulp-clean 2. 编写gulpfile.js //获取 gulp var gulp = require('gulp'); //压缩 JS var uglify = require('gulp-uglify'); //合并文件 var concat = require('gulp-concat'); //压缩html var htmlmin

vue + iview 怎样在vue项目下添加ESLint

参考:https://segmentfault.com/a/1190000012019019?utm_source=tag-newest 使用iview框架的MenuGroup标签,vscode报红,提示如下 [eslint-plugin-vue] [vue/no-parsing-error] Parsing error:x-invalid-end-tag 这个时候,把MenuGroup标签改成menu-item标签 还有问题,继续往下看 在vue的项目里新添加ESLint 有的时候,早期的时候

vue+iview中的table表格导出excel表格

一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 Export2Excel.js两个文件实现 1.Blob.js 和 Export2Excel.js文件 链接:https://pan.baidu.com/s/1PvP-NxmONNh71SRDvlL_9A 密码:3h82 2.把Blob.js 和 Export2Excel.js文件添加到src文件夹

vue+iview的form表单校验总结

这篇文章时关于如何使用iview的form表单校验.主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验. 1.为需要校验的表单添加form标签 <!--注意: ref/rules/model/prop等属性是必须的--> <Form res="foemRef" :rules="formRules" :model="formData" v-if="liveNode">

Vue+Iview+Node 安装环境 运行测试Vue

1.运行环境及设置 备注:建议设置 npm config set registry https://registry.npm.taobao.org 2.全局安装vue/cli 3.创建vue 项目 vue create ls-vue 选择的结果如下图: CSS预处理器语言,此处选择LESS 4.运行项目 原文地址:https://www.cnblogs.com/linsu/p/11336264.html