依赖版本：
"dependencies": {
"kbone-ui": "^1.0.14",
"vue": "^3.5.0"
}
自定义元素配置：
{
test: /.vue$/,
use: [
'thread-loader',
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false,
isCustomElement: (tag) => {
return /wx-/.test(tag) // (return true)
}
}
}
},
'vue-improve-loader',
]
}
除了webpack中的配置，入口处也加上：
app.config.compilerOptions.isCustomElement = tag => {
return tag.startsWith('wx');
};
都无效
vue代码：
`
button
a
b
c
d
a
b
c
d
{{btn_name}}
测试内容
页面主操作 Normal
页面主操作 Loading
页面主操作 Disabled
<wx-button type="default">页面次要操作 Normal</wx-button>
<wx-button type="default" disabled="true">页面次要操作 Disabled</wx-button>
<wx-button type="warn">警告类操作 Normal</wx-button>
<wx-button type="warn" disabled="true">警告类操作 Disabled</wx-button>
<view class="button-sp-area">
<wx-button type="primary" plain="true">按钮</wx-button>
<wx-button type="primary" disabled="true" plain="true">不可点击的按钮</wx-button>
<wx-button type="default" plain="true">按钮</wx-button>
<wx-button type="default" disabled="true" plain="true">按钮</wx-button>
<wx-button class="mini-btn" type="primary" size="mini">按钮</wx-button>
<wx-button class="mini-btn" type="default" size="mini">按钮</wx-button>
<wx-button class="mini-btn" type="warn" size="mini">按钮</wx-button>
</view>
</view>
<script>
import KBoneUI from 'kbone-ui'
export default {
name: 'App',
components: {
},
computed: {
},
mounted() {
console.log('Component mounted.')
KBoneUI.register()
},
data() {
return {
btn_name: "按我!!!!!",
dialogShow: false,
buttons: [{text: '取消'}, {text: '确定'}],
}
},
methods: {
onClickBack() {
alert(2)
},
btn_clicked() {
alert('btn_clicked')
this.btn_name='按过了'
this.dialogShow = true
// this.setData({
// btn_name: "按过了.",
// dialogShow: true,
// })
},
tapDialogButton(e) {
// this.setData({
// dialogShow: false,
// })
this.dialogShow = false
},
},
}
</script>
<style>
.cnt {
margin-top: 20px;
text-align: center;
}
a, button {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
border: 1px solid #ddd;
}
</style>
`
npm run web后：
[Vue warn]: Failed to resolve component: wx-button
Error:
Uncaught TypeError: this._parent.addItem is not a function
详情：
connectedCallback() {
super.connectedCallback();
this.parent = Object(utils_tool__WEBPACK_IMPORTED_MODULE_3["findParent"])(this, parentNode => parentNode.tagName === 'WX-CHECKBOX-GROUP');
if (this._parent) this._parent.addItem(this);
this.addEventListener('tap', this.onTap);
}
意思就是wx-checkbox-group、wx-radio-group找不到addItem方法。
直接在网页中测试是没有问题的。vue3中有问题
依赖版本：
"dependencies": {
"kbone-ui": "^1.0.14",
"vue": "^3.5.0"
}
自定义元素配置：
{
test: /.vue$/,
use: [
'thread-loader',
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false,
isCustomElement: (tag) => {
return /wx-/.test(tag) // (return true)
}
}
}
},
'vue-improve-loader',
]
}
除了webpack中的配置，入口处也加上：
app.config.compilerOptions.isCustomElement = tag => {
return tag.startsWith('wx');
};
都无效
vue代码：
`
`
npm run web后：
[Vue warn]: Failed to resolve component: wx-button
Error:
Uncaught TypeError: this._parent.addItem is not a function
详情：
connectedCallback() {
super.connectedCallback();
this.parent = Object(utils_tool__WEBPACK_IMPORTED_MODULE_3["findParent"])(this, parentNode => parentNode.tagName === 'WX-CHECKBOX-GROUP');
if (this._parent) this._parent.addItem(this);
this.addEventListener('tap', this.onTap);
}
意思就是wx-checkbox-group、wx-radio-group找不到addItem方法。
直接在网页中测试是没有问题的。vue3中有问题