文本输入框

<div class="demo-line">
    <feng-input v-model:value="inputValue1" input-type="text" placeholder="请输入内容" :show-clear="true"
        @change="output(inputValue1)" width="200px">
    </feng-input>
</div>

密码输入框

<div class="demo-line">
    <feng-input v-model:value="inputValue2" :input-type="passwordType" placeholder="请输入内容" :show-clear="true" @change="output(inputValue2)"
        width="200px">
        <template #suffix>
            <div style="margin-right: 10px;display: flex;align-items: center;"
                @mousedown="passwordType = 'text'" @mouseup="passwordType = 'password'"
                @mouseleave="passwordType = 'password'" class="eyeIcon">
                <feng-icon name="eye"></feng-icon>
            </div>
        </template>
    </feng-input>
</div>

属性

属性名	说明	默认值
v-model:value	输入框值	''
placeholder	占位符	''
input-type	输入框类型	''
show-clear	是否显示清除按钮	false
width	宽度	''
focus	是否自动获取焦点	false

事件

属性名	说明
change	value改变事件
input	输入事件

插槽

插槽名	说明
suffix	尾部内容

文本输入区域

<div class="demo-line">
    <feng-textarea v-model:value="textareaValue" font-size="1em" placeholder="请输入内容" @change="output"></feng-textarea>
</div>

属性

属性名	说明	默认值
v-model:value	输入框值	''
placeholder	占位符	''
width	宽度	'100%'
height	高度	'100%'
fontSize	字体大小	'1em'

事件

事件名	说明	参数
change	value改变事件	v
input	输入事件	v

打开文件

html

<div class="demo-line">
    <feng-button text="打开文件" @click="openFile"></feng-button>
</div>

js

import { getCurrentInstance } from 'vue';
const currentInstance = getCurrentInstance();

function openFile(){
    currentInstance?.appContext.config.globalProperties.$FengOpenFilePicker().then(file => {
        console.log(file);
    })
}

参数	说明
types	文件类型，默认为空数组
compatible	兼容模式，默认为true，兼容模式下，使用原生的input[type=file]，兼容模式下，types参数无效

打开文件夹

html

<div class="demo-line">
    <feng-button text="打开文件夹" @click="openDirectory"></feng-button>
</div>

js

import { getCurrentInstance } from 'vue';
const currentInstance = getCurrentInstance();

function openDirectory(){
    currentInstance?.appContext.config.globalProperties.$FengOpenDirectoryPicker().then(dir => {
        console.log(dir);
    })
}