### Using Utility Methods from bkui-vue3

Source: https://github.com/tencentblueking/bkui-vue3/blob/staging/site/views/start/start.md

Demonstrates how to import and use utility methods provided by bkui-vue3, independent of component imports.

```JavaScript
// Example of importing an icon component
import Info from 'bkui-vue/lib/icon/info';
```

--------------------------------

### Install BKUI Vue3 via Package Managers

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

Demonstrates installation commands for BKUI Vue3 component library using npm and yarn package managers. These commands add the library as a project dependency for Vue 3 applications. Requires Node.js environment with either npm or yarn installed.

```bash
npm install bkui-vue
```

```bash
yarn add bkui-vue
```

--------------------------------

### Partial Import of bkui-vue3 Components

Source: https://github.com/tencentblueking/bkui-vue3/blob/staging/site/views/start/start.md

Shows how to import specific components from bkui-vue3. Requires the bkui-vue package and optionally less-loader if styles are not being processed.

```JavaScript
import { Button } from 'bkui-vue';
```

--------------------------------

### Vite Configuration for bkui-vue3

Source: https://github.com/tencentblueking/bkui-vue3/blob/staging/site/views/start/start.md

Configures Vite to resolve bkui-vue3 imports correctly. Similar to Webpack configuration but for Vite projects.

```JavaScript
// vite config configuration
{
  ...
  resolve: {
    alias: {
      'bkui-vue': 'bkui-vue/dist/index.esm.js'
    }
  }
}
```

--------------------------------

### Configure Input Component with Types and Validation

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

Extensive Vue 3 example showcasing BKUI Input component features including text/password/number/textarea types, clearable behavior, min/max constraints, precision for numbers, word limits with counters, prefix/suffix slots for custom content, and simplicity behavior variant. Demonstrates v-model binding and change event handling with TypeScript support inferred from the setup.

```vue
<template>
  <div>
    <!-- 基础输入框 -->
    <bk-input
      v-model="textValue"
      placeholder="请输入内容"
      @change="handleChange"
    />

    <!-- 可清空输入框 -->
    <bk-input
      v-model="clearableValue"
      clearable
      placeholder="可清空的输入框"
    />

    <!-- 密码输入框 -->
    <bk-input
      v-model="password"
      type="password"
      placeholder="请输入密码"
    />

    <!-- 数字输入框 -->
    <bk-input
      v-model="numberValue"
      type="number"
      :min="0"
      :max="100"
      :precision="2"
      placeholder="请输入数字"
    />

    <!-- 多行文本输入框 -->
    <bk-input
      v-model="textareaValue"
      type="textarea"
      :rows="4"
      placeholder="请输入多行文本"
    />

    <!-- 带字数限制的输入框 -->
    <bk-input
      v-model="limitValue"
      :maxlength="50"
      show-word-limit
      placeholder="最多输入50个字符"
    />

    <!-- 带前后缀的输入框 -->
    <bk-input v-model="urlValue" placeholder="请输入网址">
      <template #prefix>https://</template>
      <template #suffix>.com</template>
    </bk-input>

    <!-- 简约风格输入框 -->
    <bk-input
      v-model="simpleValue"
      behavior="simplicity"
      placeholder="简约风格"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const textValue = ref('');
const clearableValue = ref('');
const password = ref('');
const numberValue = ref(0);
const textareaValue = ref('');
const limitValue = ref('');
const urlValue = ref('');
const simpleValue = ref('');

const handleChange = (value) => {
  console.log('输入值变化:', value);
};
</script>
```

--------------------------------

### Webpack Configuration for bkui-vue3

Source: https://github.com/tencentblueking/bkui-vue3/blob/staging/site/views/start/start.md

Configures Webpack to resolve bkui-vue3 imports correctly. Useful for projects using full imports or needing type definitions without less.

```JavaScript
// webpack config configuration
{
  ...
  resolve: {
    alias: {
      'bkui-vue': 'bkui-vue/dist/index.esm.js'
    }
  }
}
```

--------------------------------

### Full Import of bkui-vue3 in Vue

Source: https://github.com/tencentblueking/bkui-vue3/blob/staging/site/views/start/start.md

This snippet demonstrates how to fully import bkui-vue3 and its styles into a Vue application. It requires Vue and the bkui-vue package.

```JavaScript
import { createApp } from 'vue';
import App from './App.vue';
// Full import of bkui-vue
import bkui from 'bkui-vue';
// Full import of bkui-vue styles
import 'bkui-vue/dist/style.css';

createApp(App).use(bkui).mount('#app');
```

--------------------------------

### Use Button Component with Themes, Sizes, and States

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

Comprehensive Vue 3 example demonstrating BKUI Button component capabilities including theme variants (primary, success, warning, danger), size options (small, default, large), text/outline styles, disabled/loading states, and button groups. Shows event handling for click interactions and reactive loading state management using Vue ref.

```vue
<template>
  <div>
    <!-- 基础按钮 -->
    <bk-button>默认按钮</bk-button>
    <bk-button theme="primary">主要按钮</bk-button>
    <bk-button theme="success">成功按钮</bk-button>
    <bk-button theme="warning">警告按钮</bk-button>
    <bk-button theme="danger">危险按钮</bk-button>

    <!-- 不同尺寸 -->
    <bk-button size="small">小按钮</bk-button>
    <bk-button>默认尺寸</bk-button>
    <bk-button size="large">大按钮</bk-button>

    <!-- 文字按钮 -->
    <bk-button text theme="primary">文字按钮</bk-button>

    <!-- 反色按钮 -->
    <bk-button outline theme="primary">反色按钮</bk-button>

    <!-- 禁用状态 -->
    <bk-button disabled>禁用按钮</bk-button>

    <!-- 加载状态 -->
    <bk-button :loading="isLoading" @click="handleClick">
      提交
    </bk-button>

    <!-- 按钮组 -->
    <bk-button-group>
      <bk-button>左</bk-button>
      <bk-button>中</bk-button>
      <bk-button>右</bk-button>
    </bk-button-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isLoading = ref(false);

const handleClick = async () => {
  isLoading.value = true;
  try {
    // 执行异步操作
    await fetch('/api/submit');
  } finally {
    isLoading.value = false;
  }
};
</script>
```

--------------------------------

### Configure Basic Table with Sorting and Filtering

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

Demonstrates fundamental table setup using bk-table component with reactive data and columns props. Implements column-sort and column-filter event listeners for interactive data operations. Requires Vue 3 Composition API and bkui-vue3 library.

```vue
<bk-table
  :data="tableData"
  :columns="columns"
  @column-sort="handleSort"
  @column-filter="handleFilter"
/>
```

--------------------------------

### Vue3 Select Component for Single, Multiple, and Searchable Options

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

This Vue.js code showcases the bk-select component for various selection scenarios. It demonstrates basic single selection with options, multiple selections, and a searchable select input. The component supports filtering options locally and also includes an example of remote data fetching for search suggestions.

```vue
<template>
  <div>
    <!-- 基础单选 -->
    <bk-select
      v-model="selectedValue"
      placeholder="请选择"
      @change="handleChange"
    >
      <bk-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      />
    </bk-select>

    <!-- 多选 -->
    <bk-select
      v-model="multipleValue"
      multiple
      placeholder="请选择多个选项"
    >
      <bk-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      />
    </bk-select>

    <!-- 可搜索 -->
    <bk-select
      v-model="searchValue"
      filterable
      placeholder="输入关键字搜索"
    >
      <bk-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      />
    </bk-select>

    <!-- 远程搜索 -->
    <bk-select
      v-model="remoteValue"
      filterable
      remote
      :remote-method="remoteSearch"
      :loading="loading"
      placeholder="输入关键字远程搜索"
    >
      <bk-option
        v-for="item in remoteOptions"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      />
    </bk-select>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const selectedValue = ref('');
const multipleValue = ref([]);
const searchValue = ref('');
const remoteValue = ref('');
const loading = ref(false);
const remoteOptions = ref([]);

const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
  { label: '选项四', value: '4' },
];

const handleChange = (value) => {
  console.log('选中值:', value);
};

const remoteSearch = async (query) => {
  if (!query) {
    remoteOptions.value = [];
    return;
  }
  loading.value = true;
  try {
    const response = await fetch(`/api/search?q=${query}`);
    const data = await response.json();
    remoteOptions.value = data.results;
  } finally {
    loading.value = false;
  }
};
</script>
```

--------------------------------

### 实现加载状态 (Vue)

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

展示BKUI Vue3加载组件的使用方法，支持全屏和局部加载模式。提供指令v-bkloading和组件方式两种实现方式，可自定义加载文字和控制显示状态。

```vue
<template>
  <div>
    <!-- 组件方式 - 局部加载 -->
    <div v-bkloading="{ isLoading: loading }" style="min-height: 200px">
      <div v-if="!loading">
        <p>这里是内容区域</p>
      </div>
    </div>

    <!-- 组件方式 - 自定义文字 -->
    <div
      v-bkloading="{
        isLoading: loading,
        title: '加载中...',
      }"
      style="min-height: 200px"
    >
      内容区域
    </div>

    <bk-button @click="loadData">加载数据</bk-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Loading } from 'bkui-vue';

const loading = ref(false);

const loadData = async () => {
  loading.value = true;
  try {
    await fetch('/api/data');
  } finally {
    loading.value = false;
  }
};

// 全屏加载（函数调用方式）
const showFullLoading = () => {
  const loadingInstance = Loading({
    title: '正在加载中...',
    isShow: true,
  });

  // 3秒后关闭
  setTimeout(() => {
    loadingInstance.hide();
  }, 3000);
};
</script>
```

--------------------------------

### Import BKUI Vue3 Components On-Demand

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

Illustrates selective import of specific BKUI Vue3 components to reduce bundle size. This method imports only required components and the global stylesheet, improving application performance. Ideal for projects using few components or implementing tree-shaking optimization.

```javascript
import { createApp } from 'vue';
import { BkButton, BkInput, BkTable } from 'bkui-vue';
import 'bkui-vue/dist/style.css';

const app = createApp(App);
app.use(BkButton);
app.use(BkInput);
app.use(BkTable);
```

--------------------------------

### 创建对话框组件 (Vue)

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

展示BKUI Vue3对话框组件的使用方式，包括基础对话框和自定义对话框。支持通过v-model控制显示状态，自定义头部、内容和底部区域。需要引入bk-dialog和bk-button组件。

```vue
<template>
  <div>
    <bk-button theme="primary" @click="showDialog = true">
      打开对话框
    </bk-button>

    <!-- 基础对话框 -->
    <bk-dialog
      v-model:is-show="showDialog"
      title="对话框标题"
      :width="600"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <div>这是对话框的内容区域</div>
    </bk-dialog>

    <!-- 自定义对话框 -->
    <bk-dialog
      v-model:is-show="customDialog"
      :show-footer="false"
      :width="800"
    >
      <template #header>
        <div class="custom-header">自定义头部</div>
      </template>
      <div class="custom-content">
        <p>自定义内容区域</p>
      </div>
      <template #footer>
        <bk-button @click="customDialog = false">取消</bk-button>
        <bk-button theme="primary" @click="handleCustomConfirm">
          确定
        </bk-button>
      </template>
    </bk-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showDialog = ref(false);
const customDialog = ref(false);

const handleConfirm = () => {
  console.log('确认操作');
  showDialog.value = false;
};

const handleCancel = () => {
  console.log('取消操作');
  showDialog.value = false;
};

const handleCustomConfirm = () => {
  console.log('自定义确认操作');
  customDialog.value = false;
};
</script>
```

--------------------------------

### Register BKUI Vue3 Components Globally

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

Shows how to globally register all BKUI Vue3 components in a Vue 3 application. This approach imports the complete component library and CSS, making all components available throughout the application without individual imports. Suitable for projects using multiple BKUI components.

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import bkui from 'bkui-vue';
import 'bkui-vue/dist/style.css';

const app = createApp(App);
app.use(bkui);
app.mount('#app');
```

--------------------------------

### 选择日期时间 (Vue)

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

演示BKUI Vue3日期选择器组件的多种使用场景，包括单个日期、日期范围、日期时间选择模式。支持快捷选项和禁用日期功能，可自定义日期过滤逻辑。

```vue
<template>
  <div>
    <!-- 单个日期选择 -->
    <bk-date-picker
      v-model="date"
      placeholder="选择日期"
      @change="handleDateChange"
    />

    <!-- 日期范围选择 -->
    <bk-date-picker
      v-model="dateRange"
      type="daterange"
      placeholder="选择日期范围"
    />

    <!-- 日期时间选择 -->
    <bk-date-picker
      v-model="datetime"
      type="datetime"
      placeholder="选择日期时间"
    />

    <!-- 带快捷选项 -->
    <bk-date-picker
      v-model="dateWithShortcuts"
      :shortcuts="shortcuts"
      placeholder="选择日期"
    />

    <!-- 禁用日期 -->
    <bk-date-picker
      v-model="disabledDate"
      :disabled-date="disablePastDates"
      placeholder="只能选择未来日期"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const date = ref('');
const dateRange = ref([]);
const datetime = ref('');
const dateWithShortcuts = ref('');
const disabledDate = ref('');

const shortcuts = [
  {
    text: '今天',
    value: () => new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      return date;
    },
  },
  {
    text: '最近7天',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    },
  },
];

const handleDateChange = (value) => {
  console.log('选中日期:', value);
};

const disablePastDates = (date) => {
  return date < new Date();
};
</script>
```

--------------------------------

### 显示消息提示 (JavaScript)

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

演示BKUI Vue3消息提示组件的多种使用方式，支持success、warning、error和primary四种主题类型。可以设置显示时长、手动关闭等功能。需要导入Message组件。

```javascript
import { Message } from 'bkui-vue';

// 成功提示
Message({
  theme: 'success',
  message: '操作成功！',
  duration: 3000,
});

// 警告提示
Message({
  theme: 'warning',
  message: '请注意检查输入内容',
});

// 错误提示
Message({
  theme: 'error',
  message: '操作失败，请稍后重试',
});

// 普通提示
Message({
  theme: 'primary',
  message: '这是一条普通消息',
});

// 带关闭按钮的提示
Message({
  theme: 'success',
  message: '可以手动关闭的消息',
  duration: 0, // 不自动关闭
  dismissable: true,
});

// 在 Vue 组件中使用
export default {
  methods: {
    async handleSubmit() {
      try {
        await this.submitForm();
        Message.success('提交成功！');
      } catch (error) {
        Message.error(`提交失败: ${error.message}`);
      }
    },
  },
};
```

--------------------------------

### Define Custom Column Templates and Actions

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

Shows inline column definition with scoped slots for custom cell rendering. Implements conditional styling and content based on row data values. Includes action button components with row-specific event handlers for edit and delete operations.

--------------------------------

### Implement Virtual Scrolling for Large Datasets

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

Enables performance-optimized rendering for extensive data collections using virtual-enabled property. Configures max-height to constrain table viewport and manage memory usage efficiently. Reuses existing column definitions while binding to large data sources.

```vue
<bk-table
  :data="largeData"
  :columns="columns"
  virtual-enabled
  :max-height="500"
/>
```

--------------------------------

### Vue3 Form Component with Validation and Submission

Source: https://context7.com/tencentblueking/bkui-vue3/llms.txt

This Vue.js code demonstrates a form with various input fields, including username, email, age, and password. It utilizes the bk-form component for data binding, validation rules, and submission handling. The form supports required fields, specific formats (email), range validation (age), and custom password confirmation logic. It also includes reset functionality.

```vue
<template>
  <div>
    <bk-form
      :model="formData"
      :rules="formRules"
      ref="formRef"
      label-width="120px"
    >
      <!-- 必填项 -->
      <bk-form-item label="用户名" property="username" required>
        <bk-input v-model="formData.username" placeholder="请输入用户名" />
      </bk-form-item>

      <!-- 邮箱验证 -->
      <bk-form-item label="邮箱" property="email">
        <bk-input v-model="formData.email" placeholder="请输入邮箱" />
      </bk-form-item>

      <!-- 数字范围验证 -->
      <bk-form-item label="年龄" property="age">
        <bk-input
          v-model="formData.age"
          type="number"
          placeholder="请输入年龄"
        />
      </bk-form-item>

      <!-- 自定义验证 -->
      <bk-form-item label="密码" property="password">
        <bk-input
          v-model="formData.password"
          type="password"
          placeholder="请输入密码"
        />
      </bk-form-item>

      <bk-form-item label="确认密码" property="confirmPassword">
        <bk-input
          v-model="formData.confirmPassword"
          type="password"
          placeholder="请再次输入密码"
        />
      </bk-form-item>

      <!-- 表单操作 -->
      <bk-form-item>
        <bk-button theme="primary" @click="handleSubmit">提交</bk-button>
        <bk-button @click="handleReset">重置</bk-button>
      </bk-form-item>
    </bk-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const formRef = ref(null);

const formData = reactive({
  username: '',
  email: '',
  age: null,
  password: '',
  confirmPassword: '',
});

const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3-20个字符', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { email: true, message: '请输入正确的邮箱格式', trigger: 'blur' },
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { min: 18, max: 100, message: '年龄范围18-100', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少6个字符', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (value) => {
        return value === formData.password;
      },
      message: '两次密码输入不一致',
      trigger: 'blur',
    },
  ],
};

const handleSubmit = async () => {
  try {
    await formRef.value.validate();
    console.log('表单验证通过:', formData);
    // 提交表单数据
    await fetch('/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
    });
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleReset = () => {
  formRef.value.resetFields();
};
</script>
```

--------------------------------

### Cascader Panel Slot Customization (Vue 3)

Source: https://github.com/tencentblueking/bkui-vue3/blob/staging/packages/cascader/README.md

Demonstrates how to use the panel slot in the bk-cascader component to customize the content of each panel. This allows for adding custom headers or other elements based on the current panel's level and nodes. The slot provides access to nodes, level, and activePath.

```Vue
<template>
  <bk-cascader v-model="value" :list="data">
    <template #panel="{ nodes, level }">
      <div class="custom-panel-header">
        面板层级: {{ level }}, 节点数量: {{ nodes.length }}
      </div>
    </template>
  </bk-cascader>
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.