index

### Basic bk-magic-vue Hello World Page HTML Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/install/readme.md This complete HTML page demonstrates a basic "Hello World" example using `bk-magic-vue` components (`bk-button`, `bk-date-picker`, `bk-diff`, `bk-tooltips`, `bk-popover`) integrated with Vue.js. It includes CDN links for Vue and `bk-magic-vue`, defines a root Vue instance, and shows data binding and event handling. ```HTML index

Hello World

超长

今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错

``` -------------------------------- ### Installing bk-magic-vue via NPM Bash Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/install/readme.md This snippet provides the command to install the `bk-magic-vue` library using the Node Package Manager (NPM). Executing this command in a project's terminal will download the package and save it as a dependency, which is the recommended approach for projects using build tools like Webpack. ```Bash $ npm i bk-magic-vue --save ``` -------------------------------- ### Installing Babel Plugin for On-Demand Import - Bash Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/start/readme.md Provides the npm command necessary to install the babel-plugin-import-bk-magic-vue development dependency, which is required for enabling on-demand component imports via Babel. ```bash npm i babel-plugin-import-bk-magic-vue -D ``` -------------------------------- ### Main Component Setup with Initial Data and Methods Vue Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/upload/readme.md This Vue component script provides the initial data properties (like `delay`, `limit`, and sample `files`) and defines common methods (`testSuccess`, `testProgress`, `testErr`, `testDone`, `testExceed`, `handleRes`) used across different upload examples on the page. ```Vue import { bkUpload } from '@' export default { components: { bkUpload }, data () { return { delay: true, limit: 2, files1: [ { name: 'image.png', status: 'done', url: './example/static/images/preview/2.png' } ], file2: [ { name: 'r_project_page.csv', url: 'https://power-backend-1252002024.cos.ap-guangzhou.myqcloud.com/20211018101752r_project_page.csv' } ] } }, methods: { testSuccess (file, fileList) { console.log(file, fileList, 'success') }, testProgress (e, file, fileList) { console.log(e, file, fileList, 'progress') }, testErr (file, fileList) { console.log(file, fileList, 'error') }, testDone (fileList) { console.log(fileList, 'done') }, testExceed (file, fileList) { this.$bkMessage({ theme: 'error', message: `最多上传${this.limit}个文件`, offsetY: 80 }) }, handleRes (response) { console.log(response) if (response.id) { return true } return false } } } ``` -------------------------------- ### Basic bk-back-top Demo Script (Vue JavaScript) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/back-top/readme.md This script block provides the necessary setup for the basic `bk-back-top` demo example. It imports the `bkBackTop` component, referencing it via `{{BASE_LIB_NAME}}`, and registers it locally within the demo's Vue component definition for use in its template. ```JavaScript ``` -------------------------------- ### Initializing Vue with Full bk-magic-vue Import - JavaScript Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/start/readme.md Demonstrates how to import the entire bk-magic-vue library and its CSS styles into a Vue application's entry file (main.js). It shows using Vue.use() to install the plugin for global availability. ```javascript import Vue from 'vue' import App from './App' import router from './router' // 全量引入 bk-magic-vue import bkMagic from '{{BASE_LIB_NAME}}' // 全量引入 bk-magic-vue 样式 import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' Vue.use(bkMagic) new Vue({ el: '#root', router, template: '', components: {App} }) ``` -------------------------------- ### Global Configuration for Full bk-magic-vue Import - JavaScript Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/start/readme.md Shows how to pass a global configuration object as the second argument to Vue.use() when installing the entire bk-magic-vue library. This allows setting options like the initial z-index for modal-like components. ```javascript import Vue from 'vue' import bkMagicVue from '{{BASE_LIB_NAME}}' Vue.use(bkMagicVue, { zIndex: 3000 }) ``` -------------------------------- ### Initializing bk-resize-layout Component Vue/JavaScript Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/resize-layout/readme.md This script block defines the Vue component setup for the documentation page. It imports necessary components like bkResizeLayout, bkRadioGroup, and bkRadioButton and registers them for use in the template. It also initializes reactive data properties used in the examples, such as 'placement' and 'immediate'. ```JavaScript ``` -------------------------------- ### Installing bk-magic-vue Library with npm Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README_EN.md This command installs the bk-magic-vue library and adds it as a production dependency to your project using npm. It is the first step to using the library in your Vue application. ```Bash npm install --save bk-magic-vue ``` -------------------------------- ### Basic Usage of bk-Link with Themes (Vue Example) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/link/readme.md This example demonstrates the basic rendering of the `bk-link` component using various `theme` options (default, primary, success, warning, danger). The HTML shows the template structure, and the accompanying script imports and registers the component. ```HTML ``` ```JavaScript ``` -------------------------------- ### Installing ESLint Configuration Package (Bash) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/spec/readme.md This bash command uses the npm package manager to install the `@blueking/eslint-config` package as a development dependency. This package contains the predefined coding standards and ESLint configurations. ```bash npm install -D @blueking/eslint-config ``` -------------------------------- ### Global Configuration for On-Demand Import - JavaScript Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/start/readme.md Demonstrates how to set global configuration options, like the initial z-index, when using on-demand imports. This is achieved by assigning a configuration object to Vue.prototype.$BK_EL before using or individually installing components. ```javascript import Vue from 'vue' import { bkButton } from '{{BASE_LIB_NAME}}' Vue.prototype.$BK_EL = { zIndex: 3000 } Vue.use(bkButton) ``` -------------------------------- ### Including bk-magic-vue CSS and JS via CDN HTML Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/install/readme.md This snippet shows how to include the `bk-magic-vue` component library's CSS and JavaScript files directly into an HTML page using CDN links. This is the simplest method for quick integration without a build tool. It requires an internet connection to fetch the files. ```HTML ``` -------------------------------- ### Importing bk-magic-vue Utility Methods and Assets - JavaScript Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/start/readme.md Provides examples of importing specific utility methods (tippy, deepmerge, popManager, zIndexManager, pinyin) and the SVG icon asset directly from their internal paths within the bk-magic-vue library. These can be used independently of component imports. ```javascript // tippy 单独引入方式： import tippy from '{{BASE_LIB_NAME}}/lib/utils/tippy' // deepmerge 单独引入方式： import deepmerge from '{{BASE_LIB_NAME}}/lib/utils/deepmerge' // popManager 单独引入方式： import popManager from '{{BASE_LIB_NAME}}/lib/utils/pop-manager' // zIndexManager 单独引入方式： import zIndexManager from '{{BASE_LIB_NAME}}/lib/utils/z-index-manager' // pinyin 单独引入方式： import pinyin from '{{BASE_LIB_NAME}}/lib/utils/pinyin' // Icon 图标组件使用 svg 图标时，需要单独引入 import '{{BASE_LIB_NAME}}/lib/utils/svg-icon' ``` -------------------------------- ### Defining Vue Component Logic for bk-cascade Examples (JavaScript) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/cascade/readme.md This script block sets up the initial data states for various `bk-cascade` examples (single value, multiple values, disabled, remote data) and defines handler methods for component events like `change` and `clear`, as well as a method for simulating remote data loading. ```JavaScript import { bkCascade } from '@' export default { components: { bkCascade }, data () { return { id: 1, value: [], seachValue: [], slotvalue: [], multipleValue: [['yunnan', 'kunming', 'guanduqu'], ['yunnan', 'dali'], ['yunnan', 'kunming', 'xishanqu']], checkAnyValue: ['yunnan', 'kunming'], list: [{ id: 'hunan', name: '湖南', children: [ { id: 'changsha', name: '长沙' }, { id: 'yueyang', name: '岳阳' } ] }, { id: 'guangxi', name: '广西' }, { id: 'yunnan', name: '云南', children: [ { id: 'kunming', name: '昆明', children: [ { id: 'wuhuaqu', name: '五华区' }, { id: 'guanduqu', name: '官渡区' }, { id: 'xishanqu', name: '西山区' } ] }, { id: null, name: '临沧市' }, { id: 0, name: '大理' }, { id: '', name: '玉溪' } ] }], disabledList: [{ id: 'hunan', name: '湖南', children: [ { id: 'changsha', disabled: true, name: '长沙' }, { id: 'yueyang', name: '岳阳' } ] }, { id: 'guangxi', name: '广西', disabled: true }, { id: 'yunnan', name: '云南', children: [ { id: 'kunming', name: '昆明', children: [ { id: 'wuhuaqu', disabled: true, name: '五华区' }, { id: 'guanduqu', name: '官渡区' }, { id: 'xishanqu', name: '西山区' } ] }, { id: 0, name: '大理' }, { id: '', name: '玉溪' } ] }], remoteList: [{ id: 'hunan', name: '湖南' }, { id: 'guangxi', name: '广西', disabled: true }, { id: 'yunnan', name: '云南' }], multiple: true, checkAnyLevel: true, clearable: true, filterable: true, disabled: true, isRemote: true, maxWidth: 500 } }, methods: { addCity() { const id = Math.floor(Math.random() * 100) this.list.push({ id: id, name: 'City' +id }) }, handleChange (newValue, oldValue, selectList) { console.log(newValue, oldValue, selectList) }, handleClear (newValue, oldValue, selectList) { console.log(1, newValue, oldValue, selectList) }, remoteMethod (item, resolve) { if (item.isLoading === false) { resolve(item) } else { this.$set(item, 'isLoading', true) setTimeout(() => { const res = {} res.data = [] for (let i = 1; i <= 3; i++) { this.id += i res.data.push({ id: this.id, name: '选项' + this.id }) } if (this.id > 20) { res.data = [] } item.children = res.data // 通过调用resolve将子节点数据返回，通知组件数据加载完成 resolve(item) }, 1000) } } } } ``` -------------------------------- ### Using On-Demand Namespaced Components in HTML - Example Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/config/readme.md Shows how components with distinct, individually configured namespaces are referenced in HTML templates. This example uses `` and ``, reflecting the namespaces set during the on-demand JavaScript configuration. ```html

``` -------------------------------- ### Installing Babel Plugin for On-Demand Import Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README_EN.md This command installs the babel-plugin-import-bk-magic-vue as a development dependency. This plugin is required to enable on-demand component importing from the bk-magic-vue library, helping to reduce bundle size. ```Bash npm i babel-plugin-import-bk-magic-vue -D ``` -------------------------------- ### Defining bkNotify Example Component - Vue/JavaScript Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/notify/readme.md Defines the main Vue component structure for the documentation page examples. It imports the bkButton component and sets up data properties for notification content and position placements. Includes various methods (handleDefault, handleHideTitle, handleSingle, handleVNodeMessage, handleLongExtend, handleLongJump, handleHtmlMessage) used by the demo examples to trigger $bkNotify with different configurations. ```JavaScript import { bkButton } from '@' export default { components: { bkButton }, data () { return { title: '你好！欢迎你使用蓝鲸智云产品', message: '你好，你申请的功能权限现已开通，请及时登录查询。如有疑问，请与蓝鲸智云管理人员联系或关注微信公众账号。', placement: { topLeft: 'top-left', topRight: 'top-right', bottomLeft: 'bottom-left', bottomRight: 'bottom-right' } } }, methods: { handleDefault () { this.$bkNotify({ title: this.title, message: this.message, limitLine: 3, offsetY: 80 }) }, handleHideTitle () { this.$bkNotify({ message: this.message, limitLine: 3, offsetY: 80 }) }, handleSingle (config) { config.title = this.title config.message = this.message config.offsetY = 80 config.limitLine = 3 this.$bkNotify(config) }, handleVNodeMessage () { const h = this.$createElement this.$bkNotify({ title: this.title, message: h('p', { style: { margin: 0 } }, [ '这是', h('span', { style: { color: 'red', } },'自定义'), '输入渲染的内容' ]), offsetY: 80 }) }, handleLongExtend () { this.$bkNotify({ title: this.title, message: '测试环境，仅限制业务【蓝鲸作业平台】下IP测试环境，仅限制业务【蓝鲸作业平台】下IP测试环境，' + '仅限制业务【蓝鲸作业平台】下IP测试环境，仅限制业务【蓝鲸作业平台】下IP测试环境，' + '仅限制业务【蓝鲸作业平台】下IP测试环境，仅限制业务【蓝鲸作业平台】下' + 'IP: 127.0.0.1/127.0.0.1/127.0.0.1/127.0.0.1/127.0.0.1/127.0.0.1/' + '127.0.0.1/127.0.0.1/127.0.0.1/127.0.0.1 可用', theme: 'error', offsetY: 80, showViewMore: true, limitLine: 2, onViewMoreHandler () { this.limitLine = 0 this.showViewMore = false } }) }, handleLongJump () { this.$bkNotify({ title: this.title, message: '测试环境，仅限制业务【蓝鲸作业平台】下IP测试环境，仅限制业务【蓝鲸作业平台】下IP测试环境，' + '仅限制业务【蓝鲸作业平台】下IP测试环境，仅限制业务【蓝鲸作业平台】下IP测试环境，' + '仅限制业务【蓝鲸作业平台】下IP测试环境，仅限制业务【蓝鲸作业平台】下' + 'IP: 127.0.0.1/127.0.0.1/127.0.0.1/127.0.0.1/127.0.0.1/127.0.0.1/' + '127.0.0.1/127.0.0.1/127.0.0.1/127.0.0.1 可用', theme: 'error', offsetY: 80, showViewMore: true, limitLine: 2, onViewMoreHandler () { alert('跳转链接') } }) }, handleHtmlMessage () { this.$bkNotify({ title: '你好！欢迎你使用蓝鲸智云产品', message: '你好，你申请的功能权限现已开通，请及时登录查询。
如有疑问，请与蓝鲸智云管理人员联系或关注微信公众账号。', useHTMLString: true, limitLine: 0 }) } } } ``` -------------------------------- ### Examples of On-Demand Component Imports (JS) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README.md These JavaScript examples show various ways to import specific components like `bkButton` and `bkDropdownMenu` directly from the `bk-magic-vue` library. This approach, when combined with the configured Babel plugin, allows you to include only the components you use, reducing the final bundle size. Aliasing imports is also demonstrated. ```js import { bkButton } from 'bk-magic-vue'\nimport { bkButton as cc } from 'bk-magic-vue'\nimport { bkButton, bkDropdownMenu } from 'bk-magic-vue'\nimport { bkButton as cc, bkDropdownMenu as dd } from 'bk-magic-vue'\nconsole.log(bkButton)\nconsole.log(cc)\nconsole.log(bkDropdownMenu)\nconsole.log(dd) ``` -------------------------------- ### Installing Babel Plugin for On-Demand Import Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README.md This command installs `babel-plugin-import-bk-magic-vue` as a development dependency. This Babel plugin is necessary to automatically transform import statements, allowing for tree-shaking and on-demand loading of individual components from the library. ```bash npm i babel-plugin-import-bk-magic-vue -D ``` -------------------------------- ### Styling bkui-vue2 Grid Demos (PostCSS) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/grid/readme.md Provides essential PostCSS styling for the grid layout examples. It includes styles for the wrapper, content blocks within columns, row alignment, and spacing, with specific adjustments for the flex layout example. ```postcss ``` -------------------------------- ### Rendering bk-big-tree in Basic Usage (Vue) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/big-tree/readme.md This example demonstrates the basic synchronous rendering of the bk-big-tree component. It includes props for enabling title tips (`enable-title-tip`), showing checkboxes (`show-checkbox`), setting initial data (`data` generated by `getNodes`), controlling link line visibility (`show-link-line`), defining default expanded nodes (`default-expanded-nodes`), and setting a custom node icon (`node-icon`). The script provides the component setup, data properties, and the recursive `getNodes` method to generate sample tree data. ```html ``` ```javascript ``` -------------------------------- ### Installing bk-magic-vue via npm Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README.md This command installs the bk-magic-vue component library as a production dependency using the npm package manager. The `--save` flag ensures it's added to the `dependencies` section of the project's `package.json` file. ```bash npm install --save bk-magic-vue ``` -------------------------------- ### Basic Usage of bk-tree Component (Vue) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/tree/readme.md This example demonstrates the basic usage of the `bk-tree` component in Vue. It configures the tree with hierarchical data, specifies a `node-key` for identification, enables a border, and binds event handlers for node clicks and expansion. ```html ``` ```javascript ``` -------------------------------- ### Running Development Server via npm Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README.md This npm command executes the `dev` script defined in the project's `package.json`. This script typically starts a local development server, often with features like hot module replacement, for developing and testing the library components interactively. ```bash npm run dev ``` -------------------------------- ### Running Development Server for Library Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README_EN.md This command is used by developers contributing to the bk-magic-vue library itself. It typically starts a local development server, often with hot-reloading, to work on and test the library components. ```Bash npm run dev ``` -------------------------------- ### Building Component Library via npm Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README.md This npm command executes the `build` script defined in the project's `package.json`. This script compiles, bundles, and minifies the library code, preparing it for distribution. The output files are usually placed in a designated directory (e.g., `dist`). ```bash npm run build ``` -------------------------------- ### Configuring bk-timeline Node States in Vue Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/timeline/readme.md Illustrates how to use the `size`, `color`, and `filled` properties within the `list` data source to visually represent different states of timeline nodes. Examples show green (success), blue (ongoing), red (error), yellow (warning), and grey (not started) states. ```html ``` ```javascript ``` ```css ``` -------------------------------- ### Building Library Distribution Files Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/README_EN.md This command compiles the source code of the bk-magic-vue library into production-ready distribution files (like .min.css and .min.js), usually placed in a 'dist' directory. This is used when preparing the library for publishing or consumption. ```Bash npm run build ``` -------------------------------- ### Adding 'Up to Now' Option for Range Pickers in Vue bk-date-picker Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/date-picker/readme.md This example demonstrates how to add an "Up to Now" option as an end time for daterange or datetimerange types of bk-date-picker using the :up-to-now prop. It notes that this option is only available after a start date/time has been selected and only if the start time is earlier than the current time. It also shows handling change and open/close events. ```html ``` ```javascript ``` -------------------------------- ### Handling Animation Events on bk-collapse-item (Vue) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/collapse/readme.md This snippet illustrates how to use the `before-enter` and `after-leave` events on individual `bk-collapse-item` components. These events fire just before the animation starts (entering) or just after it finishes (leaving), allowing for custom actions or logging. ```html ``` ```javascript ``` -------------------------------- ### Configuring Babel Plugin for On-Demand Import - JSON Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/start/readme.md Shows the necessary configuration to add the import-bk-magic-vue plugin to the .babelrc file's plugins array. This config allows Babel to automatically optimize imports from the bk-magic-vue library based on usage. ```json { "presets": ..., "plugins": [ ... ["import-bk-magic-vue", { "baseLibName": "{{BASE_LIB_NAME}}" }] ] } ``` -------------------------------- ### Implementing Basic Info Box Methods (Demo) - JavaScript Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/info-box/readme.md Standalone Vue script demonstrating the implementation of methods that call $bkInfo for basic confirmation scenarios, complementing the HTML template example. ```JavaScript ``` -------------------------------- ### Importing bk-magic-vue Components On-Demand - JavaScript Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/start/readme.md Illustrates various ways to import specific components from the bk-magic-vue library using ES module syntax, including aliasing imports. This syntax is processed by the configured Babel plugin to achieve on-demand loading. ```javascript import { bkButton } from '{{BASE_LIB_NAME}}' import { bkButton as cc } from '{{BASE_LIB_NAME}}' import { bkButton, bkDropdownMenu } from '{{BASE_LIB_NAME}}' import { bkButton as cc, bkDropdownMenu as dd } from '{{BASE_LIB_NAME}}' console.log(bkButton) console.log(cc) console.log(bkDropdownMenu) console.log(dd) ``` -------------------------------- ### Applying Simplicity Behavior to bk-date-picker in Vue Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/date-picker/readme.md This example demonstrates how to change the visual appearance of the bk-date-picker to a simpler style by setting the :behavior prop to 'simplicity'. It shows a basic date picker setup with a default date bound using v-model. ```html ``` ```javascript ``` -------------------------------- ### Enabling Cross-Day Time Range Selection in bkTimePicker Vue.js Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/time-picker/readme.md This example demonstrates how to configure the bk-time-picker component to allow time ranges that span across midnight (start time is greater than end time). This is achieved by setting the `type` prop to 'timerange' and the `allow-cross-day` prop to `true`. ```html ``` ```javascript ``` -------------------------------- ### Demonstrating Basic Alert Types in Vue Template Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/alert/readme.md This example shows the basic usage of the `bk-alert` component, demonstrating the different visual styles by setting the `type` prop to 'success', 'info', 'warning', and 'error'. Each alert displays a simple title. It includes the minimal script to register the component and basic styling. ```html ``` ```javascript ``` ```css ``` -------------------------------- ### Importing and Registering bkBackTop Vue Component (Initial Setup) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/back-top/readme.md This script block imports the `bkBackTop` component from the BlueKing UI library using the '@' alias. It then registers the component within the `components` property of a Vue component definition, making `` available for use in the template. ```JavaScript import { bkBackTop } from '@' export default { components: { bkBackTop } } ``` -------------------------------- ### Implementing bk-transfer Component Logic (Vue) Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/transfer/readme.md Defines the core Vue component structure, including importing the `bkTransfer` component, initializing various data lists (`rtxList`, `list`, `generalList`) and their corresponding selected values (`rtxValue`, `value`, `generalValue`), and defining methods for handling transfer changes (`change`) and manipulating the selected list (`addAll`, `removeAll`). This provides the reactive data and logic backing the transfer examples. ```JavaScript import { bkTransfer } from '@' export default { components: { bkTransfer }, data () { return { title: ['服务列表', '已选服务'], emptyContent: ['无数据', '未选择任何服务'], emptyRtxContent: ['无数据', '未选择任何人员'], rtxList: [ { name: 'zhangsan', code: 1 }, { name: 'lisi', code: 2 }, { name: 'laowang', code: 3 }, { name: 'zhaosi', code: 4 }, { name: 'liuer', code: 5 }, { name: 'zhousan', code: 6 }, { name: 'huangwu', code: 7 }, { name: 'tianliu', code: 8 } ], rtxValue: [1, 5, 7], list: [ { service_code: 'pipeline', service_name: '流水线', disabled: true }, { service_code: 'codecc', service_name: '代码检查' }, { service_code: 'bcs', service_name: '容器服务' }, { service_code: 'artifactory', service_name: '版本仓库' }, { service_code: 'ticket', service_name: '凭证管理' }, { service_code: 'code', service_name: '代码库', disabled: true }, { service_code: 'experience', service_name: '版本体验' }, { service_code: 'environment', service_name: '环境管理' } ], value: ['artifactory', 'ticket', 'code', 'experience'], generalList: [1, 4, 9,'ab', 8, 5, 'bc', 3], generalValue: [1, 4, 9, 'bc'], sourceLength: 0, targetLength: 0 } }, methods: { change (sourceList, targetList, targetValueList) { this.sourceLength = sourceList.length this.targetLength = targetList.length console.log(sourceList) console.log(targetList) console.log(targetValueList) }, addAll () { const list = [] this.rtxList.forEach(item => { list.push(item.code) }) this.rtxValue = [...list] }, removeAll () { this.rtxValue = [] } } } ``` -------------------------------- ### Demonstrating BKUI Spin Themes - Vue Source: https://github.com/tencentblueking/bkui-vue2/blob/staging/example/components/spin/readme.md Shows how to apply different visual themes (primary, warning, default) to the `bk-spin` component using the `theme` prop. The accompanying script imports and registers the component for use in the template. ```HTML