网页端&小程序的前端note:form的button去掉圆角

本文介绍如何在WXML中去除Button默认圆角样式的方法,并提供了具体的WXSS代码实现。同时,文中还提及了form组件的提交事件及注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

form里面的button按钮是默认带圆角,相信很多人都会在发布版本后被上级或测试要求去掉圆角,出于form自带的提交按钮使用效果非常满意,很多人仍会保留该提交button,样式的修改下图有
至于form的提交事件,官网非常详细
注意:form是不会携带view控件的值,而且 value和name缺一不可。

<form bindsubmit="formSubmit">
    <view class="l-ct">
        <view class="edit-field">
        <text>联系人:</text>
        <input type="text" name="addressName" id="addressName" maxlength="25" value="{{addressName}}" bindinput="bindNameInput" placeholder="请填写收货人姓名"/>
        </view>
        <view class="addr-v">
        <button formType="submit" class="addr-button">保存地址</button>
        </view>
        <view wx:if="{{addressId}}" class="addr-v">
          <view class="addr-button-del" bindtap="deleteAddress" id="{{addressId}}">删除地址</view>
        </view>
     </view>
  </form>
wxss文件中添加即可,我是直接加在app.wxss,避免后人被坑
/*button按钮没有圆角  */
button::after {
    border-radius: 0;
}
button{
    border-radius: 0;
}

网页端,待补充

&lt;template&gt; &lt;el-container&gt; &lt;el-main&gt; &lt;el-form ref=&quot;form1&quot; style=&quot;max-width: 600px&quot; label-width=&quot;auto&quot; status-icon :model=&quot;user&quot; :rules=&quot;rules&quot;&gt; &lt;el-form-item label=&quot;账号&quot; prop=&quot;name&quot;&gt; &lt;el-input v-model=&quot;user.name&quot; /&gt; &lt;/el-form-item&gt; &lt;el-form-item label=&quot;密码&quot; prop=&quot;password&quot;&gt; &lt;el-input type=&quot;password&quot; v-model=&quot;user.password&quot; /&gt; &lt;/el-form-item&gt; &lt;el-form-item&gt; &lt;el-checkbox v-model=&quot;user.rememberMe&quot;&gt;记住我&lt;/el-checkbox&gt; &lt;/el-form-item&gt; &lt;el-form-item&gt; &lt;el-button type=&quot;primary&quot; @click=&quot;login()&quot;&gt;登录&lt;/el-button&gt; &lt;/el-form-item&gt; &lt;/el-form&gt; &lt;/el-main&gt; &lt;/el-container&gt; &lt;/template&gt; &lt;script setup&gt; import { ref, reactive } from &#39;vue&#39; import { getCurrentInstance } from &#39;vue&#39; import { doPost } from &#39;../../utils/ajax&#39; import {ElMessage} from &#39;element-plus&#39; //定义一个响应式的user对象 const user = reactive({ id: 0, name: &#39;&#39;, password: &#39;sss&#39;, note: &#39;&#39;, rememberMe: false }) //定义校验规则 const rules = { name: [ { required: true, message: &#39;账号不能为空&#39;, trigger: &#39;blur&#39; }, //trigger 表示在什么时候触发 ], password: [ { required: true, message: &#39;密码不能为空&#39;, trigger: &#39;blur&#39; }, { min: 3, max: 10, message: &#39;长度在3到10个字符&#39;, trigger: &#39;blur&#39; } ] } const { proxy } = getCurrentInstance() //取到当前vue对应的组件实例 function login() { proxy.$refs.form1.validate((valid) =&gt; { if (valid) { var formData = new FormData() formData.append(&#39;name&#39;, user.name) formData.append(&#39;password&#39;, user.password) formData.append(&#39;rememberMe&#39;, user.rememberMe) doPost(&quot;/login&quot;, formData).then(res =&gt; { if (res.data.code == 200) { ElMessage({ message: &#39;登录成功&#39;, type: &#39;success&#39;, }) window.localStorage.removeItem(&#39;zhaoshang_token&#39;); window.sessionStorage.removeItem(&#39;zhaoshang_token&#39;); if (user.rememberMe) { window.localStorage.setItem(&#39;zhaoshang_token&#39;, res.data.data) //res.data.data 就是token } else { window.sessionStorage.setItem(&#39;zhaoshang_token&#39;, res.data.data) } window.location.href = &quot;/main&quot; } else { ElMessage({ message: &#39;登录失败&#39;, showClose: true, type: &#39;warning&#39;, }) } }) } else { ElMessage({ showClose: true, message: &#39;验证失败&#39;, type: &#39;error&#39;, }) } }) } &lt;/script&gt;帮我美化样式
最新发布
03-17
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值