鸿蒙 js中dialog 怎么取消默认的圆角属性?

<dialog id="simpledialog" class="dialog-main" oncancel="cancelDialog">
    <div class="dialog-div">
        <text class="txt">分享</text>
    </div>
</dialog>

dialog
js
2021-09-01 18:00:43
浏览
3
收藏 1
回答 3
待解决
回答 3
按赞同
/
按时间
红叶亦知秋
2

问题解决方案如下:

border-radius: 0px;

代码如下

<!-- xxx.hml -->
<div class="doc-page">
    <div class="btn-div">
        <button type="capsule" value="Click here" class="btn" onclick="showDialog"></button>
    </div>
    <dialog id="simpledialog" class="dialog-main" oncancel="cancelDialog">
        <div class="dialog-div">
            <div class="inner-txt">
                <text class="txt">Simple dialog</text>
            </div>
            <div class="inner-btn">
                <text type="capsule"onclick="cancelSchedule" class="btn-txt">Cancel</text>
                <text type="capsule"  onclick="setSchedule" class="btn-txt">Confirm</text>
            </div>
        </div>
    </dialog>
</div>
/* xxx.css */
.doc-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.btn-div {
    width: 100%;
    height: 200px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.txt {
    color: #000000;
    font-weight: bold;
    font-size: 39px;
}
.dialog-main {
    width: 500px;
}
.dialog-div {
    flex-direction: column;
    align-items: center;
}
.inner-txt {
    width: 400px;
    height: 160px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.inner-btn {
    width: 400px;
    height: 120px;
    justify-content: space-around;
    align-items: center;
}
.btn-txt{
     border-radius: 25px;
    background-color: yellow;
    border-radius: 0px;
    padding: 20px;
    width: 100px;
    height: 150px;
}
// xxx.js
import prompt from '@system.prompt';

export default {
    showDialog(e) {
        this.$element('simpledialog').show()
    },
    cancelDialog(e) {
        prompt.showToast({
            message: 'Dialog cancelled'
        })
    },
    cancelSchedule(e) {
        this.$element('simpledialog').close()
        prompt.showToast({
            message: 'Successfully cancelled'
        })
    },
    setSchedule(e) {
        this.$element('simpledialog').close()
        prompt.showToast({
            message: 'Successfully confirmed'
        })
    }
}

 

回复来自:华为开发者联盟开发者支持团队

已于2021-9-3 14:38:41修改
分享
微博
QQ
微信
回复1
2021-09-03 14:37:52
ltkk12334
1

非常受益,学习到了很多

分享
微博
QQ
微信
回复
2021-09-03 21:30:33
lidb003昵称
原来如此
分享
微博
QQ
微信
回复1
2021-09-03 21:58:29
相关问题
TextInput如何取消默认聚焦效果
169浏览 • 1回复 待解决
鸿蒙怎么实现自定义布局Dialog
7154浏览 • 2回复 已解决
ListContainerItem能取消拖拽吗
3391浏览 • 1回复 待解决
java蓝牙开发怎么取消配对
3094浏览 • 1回复 待解决
同意取消弹窗怎么实现?用哪个方法
2996浏览 • 1回复 待解决
如何实现渐变圆角边框
169浏览 • 1回复 待解决
鸿蒙webview如何去除默认白色背景?
2402浏览 • 1回复 待解决
JS API web组件 怎么使用
3417浏览 • 1回复 待解决
鸿蒙有没有clipToPadding所对应属性
3120浏览 • 1回复 待解决
鸿蒙开发如何默认启动ability
6305浏览 • 3回复 待解决