Tag:iview

  • The essential posture of webpack for daily work (1)

    Time:2022-12-6

    Why use webpack? Have you seen the source code of the jquery framework? Do you know how many lines it has in its source code? The 1.x versions are all above 10,000 lines. Let’s imagine if the more than 10,000 lines of code are in one file during development, and the file is so long, […]

  • The input component dynamically generated by vue+iview can only get the focus once

    Time:2022-12-5

    Use the iview framework to trigger Input’s automatic focus function: But the dynamically generated input component can only get the focus once upper codehtml <div v-for=”(info,index) in pageInfo.data” :key=”info.fid”> <span v-if=”currentIndex_file !== index” @click=”getcurFile(index)” >{{info.positionName}}</span> <Input v-show=”currentFile === index” @on-blur=”directModify(info.fid,index)” :ref=”‘file’+index”></Input> </div> js //data value data() { return { this.currentIndex_file = null; this.currentFile = null; […]

  • Merge two arrays according to the category ID into one array to process the cascading menu

    Time:2022-12-4

    Title description:Array one: arr = [ {categoryid: 1, title: “Language”}, {categoryid: 2, title: “Music”} ] Array two: brr= [ {courseid: 1, categoryid: 1, title: “Introduction to Writing”}, {courseid: 2, categoryid: 1, title: “Advanced Composition”}, {courseid: 3, categoryid: 2, title: “Rock Music Appreciation”}, {courseid: 4, categoryid: 2, title: “Popular Songs”} ] Need to make a secondary […]

  • Case | Table in iview: drag and drop to adapt columns, customize fixed columns, merge rows

    Time:2022-12-3

    arts /Jing Zhaoxiasource public number /Asahi’s light and shadow notesID / zhaoxiajingjing ❥❥❥❥Like, let me know you have been here~❥❥❥❥ 0 / Update Table “iview”: “2.13.0”,Compare the latest version ofiview:4.1.3The Table function in , get the latest functions: drag and drop, merge rows, etc. [PS: Due to some reasons, the entire iview cannot be upgraded […]

  • iView, Upload component beforeUpload compresses pictures

    Time:2022-12-2

    key code <Upload multiple :format=”[‘jpg’,’jpeg’,’png’]” :beforeUpload=”beforeUpload” action=”” :on-success=”upload” > <Button icon=”ios-cloud-upload-outline”>upload image</button> </Upload> import Compressor from “compressorjs” beforeUpload(file) { return new Promise((resolve, reject) => { let isLt1M = file.size / 1024 / 1024 < 1; if (isLt1M) { resolve(file); } new Compressor(file, { quality: 0.3, success(res) { res = new File([res], res.name, { type: res.type, […]

  • Go-sword is a visual web management background generation tool based on Go language

    Time:2022-12-1

    What can she satisfy you? You have code cleanliness and don’t want tools to interfere with your business logic too much You want the generated page to be customized and modified to achieve more functions You want the code to be particularly simple, readable, and easy to customize You want to quickly build a management […]

  • Vue implements dynamic manipulation of table data

    Time:2022-11-30

    Use iviewui here, if necessary, you can use other components such as element-ui, the principle is the same premise iviewui themeSee the official website for how to use ↓iviewui Effect install iviewui The installation here can refer to the official website Method 1: Import from CDN <!– import Vue.js –> <script src=”//vuejs.org/js/vue.min.js”></script> <!– import stylesheet […]

  • Experience of using iView framework in the project

    Time:2022-11-29

    How to write form validation ruleValidate: { // Input box name: [ { required: true, message: ‘The name cannot be empty’, trigger: ‘change, blur’ } ], // drop down selection box name: [ { required: true, message: ‘The name cannot be empty’ } ], // Single box name: [ { required: true, message: ‘The name […]

  • Dynamically expand the first panel of Collapse in iview (if it is a Collapse that is traversed)

    Time:2022-11-28

    For the accordion generated by dynamic data, the value of the expanded panel is directly set when the collapseVal is initialized (the first panel will not be automatically expanded) solve: <Collapse class=”ivu-collapse-unit” v-model=”collapseVal” accordion> <Panel :name=”index+”” v-for=”(item,index) in list” :key=”index”> <span>title</span> <div slot=”content”> content </div> </Panel> </Collapse> The initial value of data setting collapseVal: null, Set […]

  • iview custom theme error

    Time:2022-11-27

    According to the article, I tried to change the less version without success.https://blog.csdn.net/weixin_…Add less-loader configuration[email protected]The webpack configuration is integrated in node_modules, according to the official documentationAdd the file vue.config.js in the project root directory to add configuration to less-loader // vue.config.js module.exports = { css: { loaderOptions: { less: { // options here will be […]

  • Vue mobile phone touch screen sliding

    Time:2022-11-26

    Function: iview Carousel revolving lantern, I need to realize the sliding switching function on the phone. <div class=”phone” @touchstart=”phone_mouseS” @touchend=”phone_mouseE”> <Carousel :autoplay-speed=”5000″ v-model=”phone_mouseMIndex” autoplay :value=”0″ loop v-if=”menuChoose == ‘/'”> <CarouselItem> <img class=”img” src=”../../static/common/phone_banner_index1.jpg” /> </CarouselItem> <CarouselItem> <img class=”img” src=”../../static/common/phone_banner_index1.jpg” /> </CarouselItem> <CarouselItem> <img class=”img” src=”../../static/common/phone_banner_index3.jpg” /> </CarouselItem> </Carousel> </div> data() { return { phone_mouseMIndex: 0, […]

  • The circle progress ring in iview sets the color of the progress ring to a gradient color

    Time:2022-11-25

    <i-circle :size=”216″ :trail-width=”4″ :stroke-width=”5″ :percent=”90″ stroke-linecap=”square” :stroke-color=”[‘#F5A114′,’#FBCF2D’]” > Note: Starting from version 4.0.0, the incoming array is displayed as a gradient color:stroke-color=”[‘#F5A114′,’#FBCF2D’]”