<script setup lang="ts">
import { ref, computed } from 'vue'

defineOptions({ name: 'mj-password' })

// 对于双向绑定的属性，小程序端不能依靠v-bind="$attrs"来实现双向绑定
const props = defineProps<{
    modelValue?: any
}>()
const emit = defineEmits(['update:modelValue'])
const modelValue = computed({
    get() {
        return props.modelValue
    },
    set(val) {
        emit('update:modelValue', val)
    },
})

const password = ref(true)
</script>

<template>
    <tui-input v-model="modelValue" placeholder="请输入密码" :password="password" v-bind="$attrs">
        <template v-slot:right>
            <tui-icon
                :name="password ? 'unseen' : 'seen'"
                color="#B2B2B2"
                margin="0 0 0
            20rpx"
                @click="password = !password"
            />
        </template>
    </tui-input>
</template>

<style lang="scss" scoped></style>
